import { IconChevronLeft, IconChevronRight } from '@material-hu/icons/tabler';
import IconButton from '@material-hu/mui/IconButton';
import Box from '@material-hu/mui/Box';
import Stack from '@material-hu/mui/Stack';
import Typography from '@material-hu/mui/Typography';

import CardContainer from '@material-hu/components/design-system/CardContainer';

import useFormatDate from 'src/hooks/useFormatDate';
import { useLokaliseTranslation } from 'src/utils/i18n';
import { capitalizeFirstLetter } from 'src/utils/text';

type MonthSelectorProps = {
  currentMonth: Date;
  onPrevMonth: () => void;
  onNextMonth: () => void;
  nextMonthDisabled?: boolean;
};

const MonthSelector = ({
  currentMonth,
  onPrevMonth,
  onNextMonth,
  nextMonthDisabled = false,
}: MonthSelectorProps) => {
  const { formatDate } = useFormatDate();
  const { t } = useLokaliseTranslation('material_hu_only');

  const monthLabel = capitalizeFirstLetter(formatDate(currentMonth, 'MMMM'));
  const yearLabel = formatDate(currentMonth, 'yyyy');

  return (
    <CardContainer
      sx={{
        borderRadius: theme => theme.shape.borderRadiusM,
        '& .MuiCardContent-root': { py: 0.2, px: 1 },
        '& .MuiCardContent-root:last-child': { py: 0.2, px: 1 },
      }}
    >
      <Stack
        sx={{
          flexDirection: 'row',
          alignItems: 'center',
          gap: 0.5,
          justifyContent: 'space-between',
          p: 0,
        }}
      >
        <IconButton
          size="small"
          aria-label={t('date_period_selector.previous_month')}
          onClick={onPrevMonth}
        >
          <IconChevronLeft size={18} />
        </IconButton>
        <Box sx={{ minWidth: 80, textAlign: 'center' }}>
          <Typography variant="globalXS">
            {monthLabel} {yearLabel}
          </Typography>
        </Box>
        <IconButton
          size="small"
          aria-label={t('date_period_selector.next_month')}
          disabled={nextMonthDisabled}
          onClick={onNextMonth}
        >
          <IconChevronRight size={18} />
        </IconButton>
      </Stack>
    </CardContainer>
  );
};

export default MonthSelector;