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

import { Dsp, dspNames } from '../Consts'
import { ageDemographicsWithUnknown } from '../demographics'
import {
  DemographicsAgeBand,
  DspDemographicsFieldsFragment,
  AgeRange,
} from '../graphql/__generated__/sdk'
import { NetworkError } from '../hooks/useNetwork'
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'

export const DemographicsTileContent: React.FC<{
  dsp: Dsp
  ageBands?: DemographicsAgeBand[]
  selectedAgeRange?: AgeRange | null
  setSelectedAgeRange: React.Dispatch<
    React.SetStateAction<AgeRange | null | undefined>
  >
}> = ({ dsp, ageBands, selectedAgeRange, setSelectedAgeRange }) => {
  if (!ageBands) return null

  if (
    ageBands.length === 0 ||
    ageBands.every(({ percentage }) => percentage === null || percentage === 0)
  ) {
    const empty = Strings.DemographicsEmptyForDsp.replace('%s', dspNames[dsp])
    return <DataTileText text={empty} />
  }

  if (ageBands == null) {
    return <DataTileText text={Strings.DemographicsEmptyForTrack} />
  }

  const ageBandsWithUnknown = ageDemographicsWithUnknown(ageBands)

  return (
    <AutoLayout style={[{ minHeight: 264 }]} gap={24}>
      <GenderDemographics
        dspDemographics={ageBandsWithUnknown}
        selectedAgeRange={selectedAgeRange}
      />
      <AgeDemographics
        dsp={dsp}
        dspDemographics={ageBandsWithUnknown}
        selectedAgeRange={selectedAgeRange}
        onSelectAgeRange={setSelectedAgeRange}
      />
    </AutoLayout>
  )
}

/** A tile representing demographics for a DSP */
export const DemographicsTile: React.FC<{
  dsp: Dsp
  timeInterval: TimeInterval
  demographics?: DspDemographicsFieldsFragment
  error: NetworkError | null
  style?: StyleProp<ViewStyle>
}> = ({ dsp, timeInterval, demographics, error, style }) => {
  const currentInterval = timeRangeInterval(timeInterval)
  const [selectedAgeRange, setSelectedAgeRange] = useState<
    AgeRange | null | undefined
  >(undefined)

  return (
    <DataTile
      dsp={dsp}
      title={Strings.Shared.Demographics}
      subTitle={formatInterval(currentInterval)}
      style={style}
      error={error}
      onPress={() => setSelectedAgeRange(undefined)}
      disableActiveOpacity
    >
      <DemographicsTileContent
        ageBands={demographics?.ageBands}
        dsp={dsp}
        selectedAgeRange={selectedAgeRange}
        setSelectedAgeRange={setSelectedAgeRange}
      />
    </DataTile>
  )
}