import React from 'react'
import { StyleProp, Text, View, ViewStyle } from 'react-native'

import { colors } from '../Colors'
import { TextStyles } from '../Styles'
import { ConstrainedSlider } from '../components/ConstrainedSlider'
import { formatDate } from '../util'
import { formatInterval, formatWeekDay, parseDateString } from '../util/date'

/**
 * Display information about the selected date on top of the currently selected bar
 * desiredCenterPosition is a number between 0 and 1
 */
export const DateIndicator: React.FC<{
  selectedDate: string | null
  desiredCenterPosition: number
  style?: StyleProp<ViewStyle>
}> = ({ selectedDate, desiredCenterPosition, style }) => {
  return (
    <ConstrainedSlider
      desiredCenterPosition={desiredCenterPosition}
      style={style}
    >
      <View style={{ alignItems: 'center' }}>
        <Text
          style={[
            TextStyles.tinyBold,
            { color: colors.white, textTransform: 'uppercase' },
          ]}
        >
          {selectedDate && formatDate(selectedDate)}
        </Text>
        <Text
          style={[
            TextStyles.tiny,
            { color: colors.metals.metal0, textTransform: 'uppercase' },
          ]}
        >
          {selectedDate && formatWeekDay(parseDateString(selectedDate))}
        </Text>
      </View>
    </ConstrainedSlider>
  )
}

export const DateIntervalIndicator: React.FC<{
  selectedDateInterval: Interval | null
  desiredCenterPosition: number
  style?: StyleProp<ViewStyle>
}> = ({ selectedDateInterval, desiredCenterPosition, style }) => {
  const startDate =
    selectedDateInterval != null ? new Date(selectedDateInterval?.start) : null
  const endDate =
    selectedDateInterval != null ? new Date(selectedDateInterval?.end) : null
  const selectedDate =
    startDate?.getTime() === endDate?.getTime() ? startDate : null

  return (
    <ConstrainedSlider
      desiredCenterPosition={desiredCenterPosition}
      style={style}
    >
      <View style={{ alignItems: 'center' }}>
        <Text
          style={[
            TextStyles.tinyBold,
            { color: colors.white, textTransform: 'uppercase' },
          ]}
        >
          {selectedDate != null
            ? formatDate(selectedDate)
            : selectedDateInterval && formatInterval(selectedDateInterval)}
        </Text>
        <Text
          style={[
            TextStyles.tiny,
            { color: colors.metals.metal0, textTransform: 'uppercase' },
          ]}
        >
          {selectedDate && formatWeekDay(selectedDate)}
        </Text>
      </View>
    </ConstrainedSlider>
  )
}