import React from 'react'
import { StyleProp, Text, View, ViewStyle } from 'react-native'
import { colorsV2 } from '../Colors'
import { ConstrainedSlider } from '../components/ConstrainedSlider'
import { TextStylesV2 } from '../Styles'
import { formatDate } from '../util'
import { 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={[
            TextStylesV2.tinyBold,
            { color: colorsV2.white, textTransform: 'uppercase' },
          ]}
        >
          {selectedDate && formatDate(selectedDate)}
        </Text>
        <Text
          style={[
            TextStylesV2.tiny,
            { color: colorsV2.metals.metal0, textTransform: 'uppercase' },
          ]}
        >
          {selectedDate && formatWeekDay(parseDateString(selectedDate))}
        </Text>
      </View>
    </ConstrainedSlider>
  )
}