import {
  nextMonday,
  nextSunday,
  previousMonday,
  previousSunday,
} from 'date-fns';

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

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

import { logEvent } from 'src/config/amplitude';
import useFormatDate from 'src/hooks/useFormatDate';
import { EventName } from 'src/types/amplitude';
import { getWeekRange } from 'src/utils/date';
import { useLokaliseTranslation } from 'src/utils/i18n';

import { useShiftsSelectionActions } from '../contexts/ShiftsSelectionContext';

const currentDate = new Date();
const DATE_FORMAT = 'dd/MMM/yyyy';

const WeekSelector = () => {
  const { t } = useLokaliseTranslation('shifts');
  const { formatDate } = useFormatDate();
  const { startDate, endDate, setStartDate, setEndDate } =
    useShiftsSelectionActions();

  const handleCurrentWeekSelection = () => {
    logEvent(EventName.SHIFT_MANAGEMENT_PERIOD_CHANGE, {
      period: 'current_week',
    });
    setStartDate(getWeekRange(currentDate).startDate);
    setEndDate(getWeekRange(currentDate).endDate);
  };

  const handlePreviousWeekSelection = () => {
    const newEndDate = previousSunday(startDate);
    setEndDate(newEndDate);
    setStartDate(previousMonday(newEndDate));
  };

  const handleNextWeekSelection = () => {
    const newStartDate = nextMonday(startDate);
    setStartDate(newStartDate);
    setEndDate(nextSunday(newStartDate));
  };

  const weekRange = `${formatDate(startDate, DATE_FORMAT)} - ${formatDate(endDate, DATE_FORMAT)}`;

  return (
    <Stack sx={{ flexDirection: 'row', gap: 1 }}>
      <Button
        variant="secondary"
        onClick={handleCurrentWeekSelection}
        size="medium"
        sx={{ height: 'unset' }}
      >
        {t('current_week')}
      </Button>
      <Stack
        sx={{
          alignItems: 'center',
          backgroundColor: ({ palette }) =>
            palette.new.background.layout.tertiary,
          border: '1px solid',
          borderColor: ({ palette }) => palette.new.border.neutral.default,
          borderRadius: 1,
          flexDirection: 'row',
          justifyContent: 'space-between',
          px: 1.5,
          py: 0.5,
          minWidth: 336,
        }}
      >
        <IconButton
          aria-label={t('previous_week')}
          onClick={handlePreviousWeekSelection}
          variant="tertiary"
          sx={{ p: 0.5 }}
        >
          <IconChevronLeft size={16} />
        </IconButton>
        <Typography
          variant="globalS"
          sx={{
            textTransform: 'uppercase',
          }}
        >
          {weekRange}
        </Typography>
        <IconButton
          aria-label={t('next_week')}
          onClick={handleNextWeekSelection}
          variant="tertiary"
          sx={{ p: 0.5 }}
        >
          <IconChevronRight size={16} />
        </IconButton>
      </Stack>
    </Stack>
  );
};

export default WeekSelector;