import { FC } from 'react'

import Box from '../../box'
import { IconButton } from '../../button'
import { cs } from '../../utils'
import { FlowDirection, TimeUnitMode } from '../calendar.types'
import { TimeUnitHeader } from './timeUnitHeader'

type Props = {
  nextDisabled?: boolean
  onChangeViewItem: (direction: FlowDirection) => void
  onSetTimeUnitMode: (mode: TimeUnitMode) => void
  prevDisabled?: boolean
  timeUnitMode: TimeUnitMode
  viewMonth: Date
}

const size = 40

/**
 * Header for the calendar
 */
export const CalendarHeader: FC<Props> = ({
  nextDisabled,
  onChangeViewItem,
  onSetTimeUnitMode,
  prevDisabled,
  timeUnitMode,
  viewMonth,
}) => (
  <Box borderBottom="1px solid lightgray" centerV className={cs('vui-calendar-header')}>
    <Box className="vui-calendar-header-left">
      <TimeUnitHeader onSetTimeUnitMode={onSetTimeUnitMode} timeUnitMode={timeUnitMode} viewMonth={viewMonth} />
    </Box>
    <Box className="vui-calendar-header-right" flex="1" justify="flex-end">
      <IconButton
        aria-label="previous"
        className="icon"
        disabled={prevDisabled}
        h={size}
        icon="falChevronLeft"
        onClick={() => onChangeViewItem('prev')}
        size="sm"
        w={size}
      />
      <IconButton
        aria-label="next"
        className="icon"
        disabled={nextDisabled}
        h={size}
        icon="falChevronRight"
        onClick={() => onChangeViewItem('next')}
        size="sm"
        w={size}
      />
    </Box>
  </Box>
)
