import _ from 'lodash'
import React from 'react'
import { StyleProp, View, ViewStyle } from 'react-native'

import { useVideoViews } from '../hooks/useVideoViews'
import { streamsSummary } from '../streams'
import {
  oldGraphTimeIntervals,
  timeIntervalOptions,
} from '../types/TimeInterval'
import { timeRangeInterval } from '../util'
import {
  intervalToStrings,
  previousInterval as getPreviousInterval,
} from '../util/date'
import {
  EntityStreamsIntervalTableRow,
  EntityStreamsIntervalTableRowSkeleton,
} from './EntityStreamsIntervalTable'
import { EntityStreamsTableRow } from './EntityStreamsTable'

export const VideoViewsTable: React.FC<{
  videoId: string
  countryCode: string
  style?: StyleProp<ViewStyle>
}> = ({ videoId, countryCode, style }) => {
  const intervals = [...timeIntervalOptions(oldGraphTimeIntervals)]

  const intervalMetricQueries = intervals
    .sort((a, b) => a.days - b.days)
    .flatMap((timeInterval) => {
      const currentInterval = timeRangeInterval(timeInterval.value)
      const previousInterval = getPreviousInterval(currentInterval)

      return [currentInterval, previousInterval].map((interval) => ({
        market: countryCode,
        interval: intervalToStrings(interval),
      }))
    })

  const { views } = useVideoViews(videoId, intervalMetricQueries)

  const summaries =
    views != null
      ? _.chunk(views, 2).map(([current, previous]) => {
          return streamsSummary(
            current.map(({ date, views }) => ({ date, data: views })),
            previous.map(({ date, views }) => ({ date, data: views }))
          )
        })
      : null

  const maxIntervalStreams =
    summaries != null
      ? summaries[summaries.length - 1]?.currentIntervalStreams ?? null
      : null

  return (
    <View style={[style]}>
      {summaries != null && maxIntervalStreams != null
        ? summaries.map((summary, i) => (
            <EntityStreamsTableRow key={i + 1} index={i + 1}>
              <EntityStreamsIntervalTableRow
                currentIntervalStreams={summary.currentIntervalStreams}
                changePercentage={summary.changePercentage ?? undefined}
                maxIntervalStreams={maxIntervalStreams}
                label={intervals[i].labelShort}
                interval={timeRangeInterval(intervals[i].value)}
              />
            </EntityStreamsTableRow>
          ))
        : intervals.map((_, i) => (
            <EntityStreamsTableRow key={i + 1} index={i + 1}>
              <EntityStreamsIntervalTableRowSkeleton />
            </EntityStreamsTableRow>
          ))}
    </View>
  )
}