import { eachDayOfInterval } from 'date-fns/esm'
import React from 'react'
import { StyleProp, View, ViewStyle } from 'react-native'
import { BarChartTouchWrapper } from '../components/BarChartTouchWrapper'
import { formatDateString, parseDateString } from '../util/date'
import { DateIndicator } from './DateIndicator'
import { StackedLineGraph } from './StackedLineGraph'

export const SourceBreakdownAreaGraph: React.FC<{
  maxInterval: Interval
  selectedInterval: Interval
  data: { date: string; sources: Record<string, number | null> }[]
  sourceOrder: string[]
  colors: Record<string, string>
  selectDate: (date: string | null) => void
  selectedDate: string | null
  onHoverDate: () => void
  onHoverDateEnd: () => void
  style?: StyleProp<ViewStyle>
}> = ({
  data,
  sourceOrder,
  colors,
  maxInterval,
  selectedInterval,
  selectDate,
  selectedDate,
  onHoverDate,
  onHoverDateEnd,
  style,
}) => {
  const datesInInterval = eachDayOfInterval(maxInterval).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) => {
          selectDate(datesInInterval[barIndex])
          onHoverDate()
        }}
        onHoverBarEnd={() => {
          selectDate(null)
          onHoverDateEnd()
        }}
      >
        <StackedLineGraph
          maxInterval={maxInterval}
          selectedInterval={selectedInterval}
          selectedDate={
            selectedDate != null ? parseDateString(selectedDate) : null
          }
          data={data}
          sourceOrder={sourceOrder}
          colors={colors}
          yAxisLabelsWidth={yAxisLabelsWidth}
        />
      </BarChartTouchWrapper>
    </View>
  )
}