import React from 'react'
import { StyleProp, Text, ViewStyle } from 'react-native'
import { colorsV2 } from '../Colors'
import { Dsp } from '../Consts'
import { valuesForAllDatesInInterval } from '../DateData'
import {
  StreamsByDateResult,
  useEntityStreamsSummary,
} from '../hooks/useEntityStreams'
import { TextStylesV2 } from '../Styles'
import { TimeInterval } from '../types/TimeInterval'
import { formatCountShort, timeRangeInterval } from '../util'
import { formatInterval } from '../util/date'
import { BarChart } from './BarChart'
import { DataTile } from './DataTile'

/**
 * A tile representing entity (track/video) streams/views for a dsp
 */
export const EntityStreamsTile: React.FC<{
  dsp: Dsp | 'all'
  timeInterval: TimeInterval
  onPress: () => void
  style?: StyleProp<ViewStyle>
  useEntityStreams: (interval: Interval) => StreamsByDateResult
  title: string
  infoModalText?: string
  infoModalTitle?: string
}> = ({
  dsp,
  timeInterval,
  onPress,
  style,
  useEntityStreams,
  title,
  infoModalText,
  infoModalTitle,
}) => {
  const currentInterval = timeRangeInterval(timeInterval)
  const response = useEntityStreamsSummary(currentInterval, useEntityStreams)
  const summary = response?.data
  const error = response?.error

  return (
    <DataTile
      dsp={dsp}
      title={title}
      subTitle={formatInterval(currentInterval)}
      changePercentage={summary?.changePercentage}
      onPress={onPress}
      style={[{ minHeight: 340 }, style]}
      error={error}
      infoModalText={infoModalText}
      infoModalTitle={infoModalTitle}
    >
      {summary != null ? (
        <>
          <BarChart
            data={valuesForAllDatesInInterval(
              summary.currentIntervalStreams,
              currentInterval
            )}
            style={{ flex: 1, marginVertical: 16 }}
            barStyle={{
              fill: colorsV2.offWhite,
            }}
            barWidth={5}
            grid
            tickLabels="right"
            valueExtractor={(item) => item.value}
            rangeMin={0}
          />
          <Text style={[TextStylesV2.h4, { color: colorsV2.white }]}>
            {formatCountShort(summary.currentIntervalStreamsSum)}
          </Text>
        </>
      ) : null}
    </DataTile>
  )
}