import { FC } from 'react';

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

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

import { useAuth } from 'src/contexts/JWTContext';
import { GenericTitleDescription } from 'src/pages/dashboard/timeOff/components/shared';
import { HolidaysInfo, RegionInfo } from 'src/types/vacations';
import { formatDateInVacations } from 'src/utils/date';
import { useLokaliseTranslation } from 'src/utils/i18n';

export type HolidaysDetailProps = {
  open: boolean;
  onClose: () => void;
  holidaysDayInfo: HolidaysInfo;
  region: RegionInfo;
};

export const HolidaysDetail: FC<HolidaysDetailProps> = props => {
  const { open, onClose, holidaysDayInfo, region } = props;

  const { t } = useLokaliseTranslation('time_off');
  const { user: loggedUser } = useAuth();

  if (!holidaysDayInfo) return null;

  return (
    <HuDrawer
      anchor="right"
      open={open}
      onClose={onClose}
      title={t('HOLIDAYS_DETAIL')}
    >
      <Stack sx={{ gap: 2 }}>
        <GenericTitleDescription
          title={t('NAME')}
          description={holidaysDayInfo.name}
        />
        <GenericTitleDescription
          title={t('DATE')}
          description={formatDateInVacations({
            date: holidaysDayInfo.date,
            user: loggedUser,
            type: 'P',
          })}
        />
        <GenericTitleDescription
          title={t('SITE')}
          description={region.title}
        />
      </Stack>
    </HuDrawer>
  );
};

export default HolidaysDetail;
