import { type FC } from 'react';
import { useTranslation } from 'react-i18next';

import { Button, IconButton, Stack } from '@mui/material';
import { useLocalizationContext } from '@mui/x-date-pickers-v6/internals/hooks/useUtils';
import {
  IconChevronDown,
  IconChevronLeft,
  IconChevronRight,
} from '@tabler/icons-react';
import { format } from 'date-fns';

import { type CustomCalendarHeaderProps } from './types';

const CustomCalendarHeader: FC<CustomCalendarHeaderProps> = props => {
  const { onMonthChange, ...headerProps } = props;
  const { t } = useTranslation('material_hu_only');
  const localeContext = useLocalizationContext();

  const formattedMonth = format(headerProps.currentMonth, 'MMMM yyyy', {
    locale: localeContext.utils.locale,
  });

  const handlePreviousMonthClick = () => {
    const newDate = new Date(headerProps.currentMonth);
    newDate.setMonth(newDate.getMonth() - 1);
    onMonthChange(newDate, 'right');
  };

  const handleNextMonthClick = () => {
    const newDate = new Date(headerProps.currentMonth);
    newDate.setMonth(newDate.getMonth() + 1);
    onMonthChange(newDate, 'left');
  };

  const handleMonthButtonClick = () => {
    // This triggers the year selection view
    headerProps.onViewChange?.('year');
  };

  return (
    <Stack
      sx={{
        alignItems: 'center',
        flexDirection: 'row',
        justifyContent: 'space-between',
      }}
    >
      <IconButton
        aria-label={t('date_period_selector.previous_month')}
        onClick={handlePreviousMonthClick}
      >
        <IconChevronLeft size={24} />
      </IconButton>
      <Button
        variant="tertiary"
        onClick={handleMonthButtonClick}
        endIcon={<IconChevronDown size={16} />}
      >
        {formattedMonth}
      </Button>
      <IconButton
        aria-label={t('date_period_selector.next_month')}
        onClick={handleNextMonthClick}
      >
        <IconChevronRight size={24} />
      </IconButton>
    </Stack>
  );
};

export default CustomCalendarHeader;
