import { eachDayOfInterval } from 'date-fns/esm'
import React from 'react'
import { StyleProp, View, ViewStyle } from 'react-native'

import { SourceColors } from '../Colors'
import { BarChartTouchWrapper } from '../components/BarChartTouchWrapper'
import { StackedAreaFigure } from '../components/figures/StackedAreaFigure'
import { formatDateString, parseDateString } from '../util/date'
import { DateIndicator } from './DateIndicator'

export const SourceBreakdownAreaGraph: React.FC<{
  interval: Interval
  data: { date: string; sources: Record<string, number | null> }[]
  sourceOrder: string[]
  sourceColors: SourceColors
  selectedDate: string | null
  setSelectedDate: (date: string | null) => void
  onHoverDate: () => void
  onHoverDateEnd: () => void
  style?: StyleProp<ViewStyle>
}> = ({
  data,
  sourceOrder,
  sourceColors,
  interval,
  selectedDate,
  setSelectedDate,
  onHoverDate,
  onHoverDateEnd,
  style,
}) => {
  const datesInInterval = eachDayOfInterval(interval).map(formatDateString)
  const numDays = datesInInterval.length
  const selectedIndex = datesInInterval.findIndex(
    (date) => date === selectedDate
  )
  const yAxisLabelsWidth = 40
  return (
    <View style={[style]}>
      <DateIndicator
        selectedDate={selectedDate}
        desiredCenterPosition={selectedIndex / numDays}
        style={{ marginRight: yAxisLabelsWidth, height: 30 }}
      />
      <BarChartTouchWrapper
        numBars={numDays}
        onHoverBar={(barIndex) => {
          setSelectedDate(datesInInterval[barIndex])
          onHoverDate()
        }}
        onHoverBarEnd={() => {
          setSelectedDate(null)
          onHoverDateEnd()
        }}
      >
        <StackedAreaFigure
          interval={interval}
          selectedDate={
            selectedDate != null ? parseDateString(selectedDate) : null
          }
          data={data}
          sourceOrder={sourceOrder}
          sourceColors={sourceColors}
        />
      </BarChartTouchWrapper>
    </View>
  )
}