import { useMemo } from 'react';

import Slide from '@material-hu/mui/Slide';
import Stack from '@material-hu/mui/Stack';
import Typography from '@material-hu/mui/Typography';

import Alert from '@material-hu/components/design-system/Alert';
import FormRangeDatePicker from '@material-hu/components/design-system/Inputs/RangeDatePicker/form';
import Title from '@material-hu/components/design-system/Title';
import { Languages } from 'src/constants/languages';
import { useAuth } from 'src/contexts/JWTContext';
import useFormatDate from 'src/hooks/useFormatDate';
import { useLokaliseTranslation } from 'src/utils/i18n';

import { duplicateShiftsFormFields } from '../../form';
import { DUPLICATE_MAX_USERS_LIMIT } from '../ShiftsTable/constants';

type Props = {
  showUsersAlert: boolean;
};

const DuplicateShiftsDrawer = ({ showUsersAlert }: Props) => {
  const { t } = useLokaliseTranslation('shifts');
  const { formatDate } = useFormatDate();
  const { user } = useAuth();
  const datePlaceholder =
    user?.language === Languages.ENGLISH ? 'MM/DD/YYYY' : 'DD/MM/YYYY';

  const rangePickerSlotProps = useMemo(
    () => ({
      CalendarHeader: {
        previousMonthText: t('general:previous'),
        nextMonthText: t('general:next'),
        changeMonthText: t('general:change_month'),
      },
      RangeSelector: {
        clearDatesText: t('general:clear'),
        applyDatesText: t('general:apply'),
      },
    }),
    [t],
  );

  return (
    <Slide
      direction="left"
      timeout={300}
      mountOnEnter
      in
    >
      <Stack sx={{ gap: 1 }}>
        {showUsersAlert && (
          <Alert
            severity="info"
            title={t('duplicate_shifts_period.limit_exceeded')}
            description={t(
              'duplicate_shifts_period.limit_exceeded_description',
              { limit: DUPLICATE_MAX_USERS_LIMIT },
            )}
          />
        )}
        <Typography
          variant="globalS"
          sx={{ mb: 2 }}
        >
          {t('duplicate_shifts_period.duplicate_instructions')}
        </Typography>
        <Title
          variant="M"
          title={t('duplicate_shifts_period.period_origin')}
          description={t('duplicate_shifts_period.period_origin_description')}
        />
        <FormRangeDatePicker
          name={duplicateShiftsFormFields.copyRange}
          inputProps={{
            dateFormatter: (date: Date) => formatDate(date, 'dd/MM/yyyy'),
            slotProps: rangePickerSlotProps,
            datePlaceholder,
            minMaxDatesDifference: 31, // 1 month max
            sx: { mb: 1 },
          }}
          rules={{
            validate: {
              required: value => Boolean(value.fromDate && value.toDate),
            },
          }}
        />
        <Title
          variant="M"
          title={t('duplicate_shifts_period.period_destination')}
          description={t(
            'duplicate_shifts_period.period_destination_description',
          )}
        />
        <FormRangeDatePicker
          name={duplicateShiftsFormFields.pasteRange}
          inputProps={{
            dateFormatter: (date: Date) => formatDate(date, 'dd/MM/yyyy'),
            slotProps: rangePickerSlotProps,
            datePlaceholder,
            minMaxDatesDifference: 31, // 1 month max
          }}
          rules={{
            validate: {
              required: value => Boolean(value.fromDate && value.toDate),
            },
          }}
        />
      </Stack>
    </Slide>
  );
};

export default DuplicateShiftsDrawer;
