import { groupBy, map, mapValues, sum } from 'lodash'
import React from 'react'
import { Text, View } from 'react-native'
import { colorsV2, GenderColors } from '../Colors'
import { Gender } from '../Consts'
import { DemographicsAgeband } from '../hooks/useTrackDemographics'
import { Strings } from '../i18n'
import { TextStylesV2 } from '../Styles'
import { sortGenders } from '../util'

const GenderPercentage: React.FC<{
  gender: Gender
  percentage: number
  small?: boolean
}> = ({ gender, percentage, small = false }) => (
  <View style={{ flexDirection: 'column', flex: 1 }}>
    <View style={{ flexDirection: 'row', alignItems: 'center' }}>
      <Text style={[TextStylesV2.tiny, { color: colorsV2.offWhite }]}>
        {Strings.Genders[gender]}
      </Text>
    </View>
    <Text
      style={[
        small ? TextStylesV2.body : TextStylesV2.h4,
        { color: GenderColors[gender] },
      ]}
    >
      {percentage}%
    </Text>
  </View>
)

export const GenderDemographics: React.FC<{
  dspDemographics: DemographicsAgeband[]
}> = ({ dspDemographics }) => {
  const genderStreams = mapValues(
    groupBy(dspDemographics, 'gender'),
    (genderAgeBands) => sum(genderAgeBands.map(({ value }) => value))
  )
  const genderStreamsTotal = sum(Object.values(genderStreams))
  const genderPercentages = map(genderStreams, (streams, gender) => ({
    gender: gender as Gender,
    percentage:
      genderStreamsTotal > 0
        ? Math.round((streams / genderStreamsTotal) * 100)
        : 0,
  }))

  return (
    <>
      <View
        style={[
          {
            flexDirection: 'row',
            justifyContent: 'space-between',
            marginBottom: 18,
          },
        ]}
      >
        {genderPercentages
          .sort((a, b) => sortGenders(a.gender, b.gender))
          .filter(({ gender }) => gender !== 'unknown')
          .map(({ gender, percentage }) => (
            <GenderPercentage
              key={gender}
              gender={gender}
              percentage={percentage}
            />
          ))}
      </View>
      <View
        style={[
          {
            flexDirection: 'row',
            justifyContent: 'space-between',
            marginBottom: 18,
          },
        ]}
      >
        <GenderPercentage
          key={'unknown'}
          gender={'unknown'}
          percentage={
            genderPercentages.find(({ gender }) => gender === 'unknown')
              ?.percentage ?? 0
          }
          small
        />
      </View>
    </>
  )
}