import * as df from 'date-fns'
import React from 'react'
import { View } from 'react-native'
import { colorsV2 } from '../Colors'
import { BarChartTouchWrapper } from '../components/BarChartTouchWrapper'
import { TimeIntervalSelector } from '../components/TimeIntervalSelector'
import { DateData } from '../DateData'
import { TimeInterval } from '../types/TimeInterval'
import { parseDateString } from '../util/date'
import { BarChart } from './BarChart'
import { DateIndicator } from './DateIndicator'

function sortDateDataByEarliestDate<T extends unknown | null>(
  a: DateData<T>,
  b: DateData<T>
): number {
  return new Date(a.date).getTime() - new Date(b.date).getTime()
}

/**
 *
 * Bar graph displaying bars for a given time interval, used for video views and track streams
 *
 */
export function DetailBarGraph<T extends number | null>({
  maxIntervalValues,
  selectedInterval,
  selectDate,
  selectedDate,
  selectTimeInterval,
  selectedTimeInterval,
  onHoverBar,
  onHoverBarEnd,
}: {
  maxIntervalValues: DateData<T>[]
  selectedInterval: Interval
  selectDate: (date: string | null) => void
  selectedDate: string | null
  selectTimeInterval: (timeInterval: TimeInterval) => void
  selectedTimeInterval: TimeInterval
  onHoverBar: () => void
  onHoverBarEnd: () => void
}): React.ReactElement {
  const numBars = maxIntervalValues.length
  const selectedBarIndex = maxIntervalValues.findIndex(
    ({ date }) => date === selectedDate
  )
  return (
    <View style={{ flex: 1 }}>
      <DateIndicator
        selectedDate={selectedDate}
        desiredCenterPosition={selectedBarIndex / numBars}
        style={{ height: 32, marginLeft: 26 }}
      />
      <View style={{ flex: 1, flexDirection: 'row' }}>
        <BarChartTouchWrapper
          numBars={maxIntervalValues.length}
          onHoverBar={(barIndex) => {
            selectDate(maxIntervalValues[barIndex].date)
            onHoverBar()
          }}
          onHoverBarEnd={() => {
            selectDate(null)
            onHoverBarEnd()
          }}
        >
          <BarChart
            data={maxIntervalValues.sort(sortDateDataByEarliestDate)}
            style={{
              flex: 1,
            }}
            barStyle={(i, item) => ({
              fill:
                item.date === selectedDate
                  ? colorsV2.white
                  : df.isWithinInterval(
                      parseDateString(item.date),
                      selectedInterval
                    )
                  ? colorsV2.offWhite
                  : colorsV2.metals.metal2,
            })}
            barWidth={5}
            valueExtractor={(item) => item.data ?? 0}
            statusExtractor={(item) =>
              item.data !== null ? 'full' : 'missing'
            }
            disablePointerEvents
            selectedBarIndex={selectedBarIndex}
            tickLabels="left"
            rangeMin={0}
          />
        </BarChartTouchWrapper>
      </View>
      <TimeIntervalSelector
        onSelectTimeInterval={selectTimeInterval}
        selectedTimeInterval={selectedTimeInterval}
      />
    </View>
  )
}