import { GetDrawerConfiguration } from '@material-hu/hooks/useDrawerV2';
import Stack from '@material-hu/mui/Stack';
import Typography from '@material-hu/mui/Typography';

import { PolicyTypes } from 'src/types/vacations';
import { useLokaliseTranslation } from 'src/utils/i18n';

export type PolicyDescriptionDrawer = {
  policyType: PolicyTypes;
  closePolicyTypeDrawer?: () => void;
};

export const getPolicyDescriptionDrawer: GetDrawerConfiguration<
  PolicyDescriptionDrawer
> = ({ policyType, closeDrawer, closePolicyTypeDrawer }) => {
  const { description } = policyType;
  const { t } = useLokaliseTranslation('time_off');

  const onClickBackToPolicyTypeDrawer = () => {
    closeDrawer();
    closePolicyTypeDrawer?.();
  };

  return {
    title: t('POLICY_DESCRIPTION'),
    hasBackButton: true,
    onClose: onClickBackToPolicyTypeDrawer,
    children: (
      <Stack sx={{ flexDirection: 'row', alignItems: 'center', gap: 1 }}>
        <Typography whiteSpace="pre-line">{description}</Typography>
      </Stack>
    ),
  };
};