import { FC } from 'react'

import { Box } from '../../box'
import { Button } from '../../button'
import { cs } from '../../utils'
import { TimeUnitMode } from '../calendar.types'
import { months } from '../consts'
import { isDay, isMonth, isYear } from '../utils'

const h = 40
const fontSize = 16

type TimeUnitHeaderProps = {
  onSetTimeUnitMode: (mode: TimeUnitMode) => void
  timeUnitMode: TimeUnitMode
  viewMonth: Date
}

/**
 * Displays the header title with the month and year being viewed
 */
export const TimeUnitHeader: FC<TimeUnitHeaderProps> = ({ onSetTimeUnitMode, timeUnitMode, viewMonth }) => {
  return (
    <Box center className={cs('vui-time-unit-header')} cursor="pointer" flex="1" justify="start">
      {isDay(timeUnitMode) && (
        <>
          <Button fontSize={fontSize} h={h} onClick={() => onSetTimeUnitMode('month')} variant="tertiaryDark">
            {months[viewMonth.getUTCMonth()]}
          </Button>
          <Button fontSize={fontSize} h={h} onClick={() => onSetTimeUnitMode('year')} variant="tertiaryDark">
            {viewMonth.getUTCFullYear()}
          </Button>
        </>
      )}
      {isMonth(timeUnitMode) && (
        <Button fontSize={fontSize} h={h} onClick={() => onSetTimeUnitMode('year')} variant="tertiaryDark">
          {viewMonth.getUTCFullYear()}
        </Button>
      )}
      {isYear(timeUnitMode) && (
        <Button fontSize={fontSize} h={h} onClick={() => onSetTimeUnitMode('day')} variant="tertiaryDark">
          Year
        </Button>
      )}
    </Box>
  )
}
