import React from 'react';
import {
  Calendar as RACCalendar,
  CalendarCell,
  CalendarGrid,
  CalendarGridBody,
  CalendarGridHeader,
  CalendarHeaderCell,
} from 'react-aria-components';
import classNames from 'classnames';

import { ConnectedIconButton } from '../ConnectedIconButton';

import { CalendarHeading } from './CalendarHeading';

const capitalize = (str: string) => str.charAt(0).toUpperCase() + str.slice(1);

export const Calendar: React.FC = () => {
  return (
    <RACCalendar className='dateField__calendar'>
      <header className='dateField__calendarHeader'>
        <CalendarHeading />
        <ConnectedIconButton slot='previous' icon='shp-back' ghost />
        <ConnectedIconButton slot='next' icon='shp-next' ghost />
      </header>
      <CalendarGrid className='dateField__calendarGrid' weekdayStyle='short'>
        <CalendarGridHeader>
          {day => (
            <CalendarHeaderCell className='dateField__calendarGridHeaderCell'>{capitalize(day)}</CalendarHeaderCell>
          )}
        </CalendarGridHeader>
        <CalendarGridBody>
          {date => (
            <CalendarCell
              date={date}
              className={value =>
                classNames('dateField__calendarGridCell', {
                  'dateField__calendarGridCell--outsideMonth': value.isOutsideMonth,
                  'dateField__calendarGridCell--unavailable': value.isUnavailable || value.isDisabled,
                  'dateField__calendarGridCell--hovered': value.isHovered && !value.isUnavailable && !value.isDisabled,
                  'dateField__calendarGridCell--focused': value.isFocused && !value.isUnavailable && !value.isDisabled,
                })
              }
            />
          )}
        </CalendarGridBody>
      </CalendarGrid>
    </RACCalendar>
  );
};