import { flatten } from 'lodash'
import React from 'react'
import { StyleSheet } from 'react-native'

import { StreamingDsp } from '../Consts'
import { spaces } from '../Spaces'
import {
  generateStreamQueriesWithTimeInterval,
  mapToSummaries,
  useTrackStreams,
} from '../hooks/useTrackStreams'
import { Strings } from '../i18n'
import { TimeInterval } from '../types/TimeInterval'
import { EntityStreamsTile2 } from './EntityStreamsTile2'

export const styles = StyleSheet.create({
  tile: { flex: 1, marginHorizontal: spaces.insets.medium },
})

export const TrackStreamsTile: React.FC<{
  isrc: string
  dsp: StreamingDsp | 'all'
  market: string
  timeInterval: TimeInterval
  onPress: (item: StreamingDsp | 'all') => void
}> = ({ isrc, dsp, timeInterval, market, onPress }) => {
  const queries = generateStreamQueriesWithTimeInterval(
    dsp,
    market,
    timeInterval
  )

  const response = useTrackStreams(isrc, flatten(queries))

  const summaries = mapToSummaries(
    response,
    queries.map((current) => current[0]?.dspId as StreamingDsp)
  )

  return (
    <EntityStreamsTile2
      summary={summaries}
      error={response?.error}
      dsp={dsp}
      timeInterval={timeInterval}
      onPress={() => onPress(dsp)}
      title={Strings.Shared.Streams}
      style={styles.tile}
    />
  )
}