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

function hasAgeRange(
  ageBand: DemographicsAgeband
): ageBand is DemographicsAgeband<AgeRange> {
  return ageBand.ageRange != null
}

export const AgeDemographics: React.FC<{
  dspDemographics: DemographicsAgeband[]
}> = ({ dspDemographics }) => {
  const ageBandsWithKnownAge: DemographicsAgeband<AgeRange>[] =
    dspDemographics.filter(hasAgeRange)
  const ageGroups = map(
    groupBy(ageBandsWithKnownAge, ({ ageRange }) => formatAgeRange(ageRange)),
    (ageBands, label) => ({
      label,
      ageBands: ageBands
        .filter(({ gender }) => gender !== 'unknown')
        .sort((a, b) => sortGenders(a.gender as Gender, b.gender as Gender)),
    })
  )
  const minValue = Math.min(...dspDemographics.map(({ value }) => value))
  const maxValue = Math.max(...dspDemographics.map(({ value }) => value))
  const barWidth = 6
  const gapWidth = 3
  return (
    <View style={[Styles.screenHorizontalPadding, { flex: 1, flexGrow: 1 }]}>
      <View
        style={{
          flex: 1,
          flexDirection: 'row',
          marginHorizontal: -12,
          marginBottom: 12,
        }}
      >
        {ageGroups.map((g) => (
          <View
            style={{
              flex: 1 / ageGroups.length,
              paddingHorizontal: 24 / ageGroups.length,
            }}
            key={g.label}
          >
            <BarChart
              key={g.label}
              data={g.ageBands.map((v) => ({ ...v, status: 'full' }))}
              rangeMin={minValue}
              rangeMax={maxValue}
              style={{
                flex: 1,
                justifyContent: 'center',
                width:
                  g.ageBands.length * barWidth +
                  (g.ageBands.length - 1) * gapWidth,
              }}
              barStyle={(i, { value }) => ({
                fill: GenderColors[g.ageBands[i].gender],
                minHeight: value > 0 ? 1 : undefined, // Ensure something is shown even for very low values
              })}
              barWidth={barWidth}
              valueExtractor={(item) => item.value}
            />
          </View>
        ))}
      </View>

      {
        <View style={{ flexDirection: 'row', marginHorizontal: -12 }}>
          {ageGroups.map((g) => (
            <View key={g.label} style={{ flex: 1 / ageGroups.length }}>
              <Text
                style={[
                  TextStylesV2.tiny,
                  {
                    textAlign: 'center',
                    color: colorsV2.offWhite,
                    marginBottom: 12,
                  },
                ]}
              >
                {g.label}
              </Text>
            </View>
          ))}
        </View>
      }
    </View>
  )
}