import React from 'react'
import { StyleProp, ViewStyle } from 'react-native'
import { dspNames, StreamingDsp } from '../Consts'
import { useTrackDemographics } from '../hooks/useTrackDemographics'
import { Strings } from '../i18n'
import { TimeInterval } from '../types/TimeInterval'
import { timeRangeInterval } from '../util'
import { formatInterval } from '../util/date'
import { AgeDemographics } from './AgeDemographics'
import { AutoLayout } from './AutoLayout'
import { DataTile, DataTileText } from './DataTile'
import { GenderDemographics } from './GenderDemographics'

/**
 * A tile representing track demographics for a DSP
 */
export const TrackDemographicsTile: React.FC<{
  isrc: string
  dsp: StreamingDsp
  countryCode: string
  timeInterval: TimeInterval
  style?: StyleProp<ViewStyle>
}> = ({ isrc, dsp, countryCode, timeInterval, style }) => {
  const currentInterval = timeRangeInterval(timeInterval)

  const { data, error } = useTrackDemographics(isrc, countryCode, timeInterval)

  const dspDemographics =
    data != null
      ? data.demographics.find((x) => x.dsp === dsp)?.ageBands || []
      : null

  return (
    <DataTile
      dsp={dsp}
      title={Strings.Shared.Demographics}
      subTitle={formatInterval(currentInterval)}
      style={[{}, style]}
      error={error}
    >
      {dspDemographics != null ? (
        dspDemographics.length === 0 ? (
          <DataTileText
            text={Strings.DemographicsEmptyForDsp.replace('%s', dspNames[dsp])}
          />
        ) : (
          <AutoLayout style={{ minHeight: 264, flex: 1 }} gap={32}>
            <GenderDemographics dspDemographics={dspDemographics} />
            <AgeDemographics dspDemographics={dspDemographics} />
          </AutoLayout>
        )
      ) : null}
    </DataTile>
  )
}