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

import { colors } from '../Colors'
import { VideoDsp } from '../Consts'
import { TextStyles } from '../Styles'
import { IntervalSummary } from '../hooks/useEntityStreams'
import { useVideoViews } from '../hooks/useVideoViews'
import { Strings } from '../i18n'
import { streamsSummary } from '../streams'
import { TimeInterval } from '../types/TimeInterval'
import { timeRangeInterval } from '../util'
import {
  intervalToStrings,
  previousInterval as getPreviousInterval,
} from '../util/date'
import { AverageViewDuration } from './AverageViewDuration'
import { EntityStreamsTile2, LabelWithContent } from './EntityStreamsTile2'

const AverageViewDurationLabel: React.FC<{
  averageViewDurationPercentage: number
  durationSeconds: number
}> = ({ averageViewDurationPercentage, durationSeconds }) => (
  <LabelWithContent label={Strings.Shared.AverageViewDuration}>
    <AverageViewDuration
      averageViewDurationPercentage={averageViewDurationPercentage}
      durationSeconds={durationSeconds}
      textStyle={{
        ...TextStyles.bodyMedium,
        textAlign: 'right',
        color: colors.white,
      }}
      percentageTextStyle={{ ...TextStyles.h4, color: colors.white }}
    />
  </LabelWithContent>
)

/**
 * A tile representing entity (track/video) streams/views for a dsp
 */
export const VideoViewsTile: React.FC<{
  videoId: string
  market: string
  dsp: VideoDsp | 'all'
  timeInterval: TimeInterval
  onPress: () => void
  style?: StyleProp<ViewStyle>
  title: string
  infoModalText?: string
  infoModalTitle?: string
  strokeColor?: string
}> = ({
  videoId,
  market,
  dsp,
  timeInterval,
  onPress,
  style,
  title,
  infoModalText,
  infoModalTitle,
  strokeColor,
}) => {
  const currentInterval = timeRangeInterval(timeInterval)
  const previousInterval = getPreviousInterval(currentInterval)

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

  const { views, durationSeconds, error } = useVideoViews(videoId, queries)

  const currentIntervalMetrics = views?.[0]
  const previousIntervalMetrics = views?.[1]

  const summary: IntervalSummary | null =
    currentIntervalMetrics != null && previousIntervalMetrics != null
      ? streamsSummary(
          currentIntervalMetrics.map(({ date, views }) => ({
            date,
            data: views,
          })),
          previousIntervalMetrics.map(({ date, views }) => ({
            date,
            data: views,
          }))
        )
      : null

  return (
    <EntityStreamsTile2
      summary={summary ? [summary] : []}
      error={error}
      dsp={dsp}
      timeInterval={timeInterval}
      onPress={onPress}
      style={style}
      title={title}
      infoModalText={infoModalText}
      infoModalTitle={infoModalTitle}
      strokeColor={strokeColor}
      bottomRight={
        durationSeconds && (
          <AverageViewDurationLabel
            durationSeconds={durationSeconds}
            averageViewDurationPercentage={_.mean(
              currentIntervalMetrics?.map(
                ({ averageViewDurationPercentage }) =>
                  averageViewDurationPercentage
              )
            )}
          />
        )
      }
    />
  )
}