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

import HuList from '@material-hu/mui/List';

import HuDialog from '@material-hu/components/design-system/Dialog';
import { Policy } from 'src/types/vacations';
import { PolicyForm } from 'src/types/vacations';
import { useLokaliseTranslation } from 'src/utils/i18n';

import { getPolicyCriticalChangesWordings } from '../utils';

type Props = {
  onClose: () => void;
  onConfirm: () => void;
  values: PolicyForm;
  policy: Policy;
};

export const PolicyDialogChanges = ({
  onClose,
  onConfirm,
  values,
  policy,
}: Props) => {
  const { t } = useLokaliseTranslation('time_off');

  const policyChanges = getPolicyCriticalChangesWordings(values, policy, t);
  const multipleChanges = policyChanges.length > 1;

  const title = multipleChanges
    ? t('policy_critical_changes.multiple_changes')
    : policyChanges[0].title;

  return (
    <HuDialog
      onClose={onClose}
      title={title}
      body={
        <HuList
          sx={{
            listStyleType: multipleChanges ? 'disc' : 'none',
            '& .MuiListItem-root': { p: 0 },
          }}
        >
          {policyChanges.map(change => (
            <Typography
              key={change.description}
              sx={{
                mt: multipleChanges ? 1 : 0,
                ml: multipleChanges ? 3 : 0,
                display: 'list-item',
                fontWeight: 'fontWeightRegular',
              }}
              variant="globalS"
            >
              {change.description}
            </Typography>
          ))}
        </HuList>
      }
      primaryButtonProps={{
        children: t('general:confirm'),
        onClick: onConfirm,
      }}
      secondaryButtonProps={{
        children: t('general:cancel'),
        onClick: onClose,
      }}
    />
  );
};