import { type FC } from 'react';

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

import HuLink from '@material-hu/components/design-system/Link';
import { useDialogLayer } from '@material-hu/components/layers/Dialogs';

import { useLokaliseTranslation } from 'src/utils/i18n';

export type SignatureModalProps = {
  url: string;
};

const SignatureModal: FC<SignatureModalProps> = ({ url }) => {
  const { t } = useLokaliseTranslation('service_management');
  const { openDialog } = useDialogLayer();

  const handleOpen = () => {
    openDialog({
      title: t('see_signature'),
      body: (
        <Stack
          sx={{
            width: 1,
            overflowX: 'hidden',
            border: theme =>
              `1px solid ${theme.palette.new.border.neutral.default}`,
            borderRadius: ({ shape }) => shape.borderRadiusM,
            alignItems: 'center',
          }}
        >
          <CardMedia
            src={url}
            component="img"
            loading="lazy"
            sx={{
              height: '320px',
              maxWidth: '552px',
              width: 'auto',
              objectFit: 'contain',
            }}
          />
        </Stack>
      ),
      dialogProps: { maxWidth: 'sm', fullWidth: true },
    });
  };

  return <HuLink onClick={handleOpen}>{t('see_signature')}</HuLink>;
};

export default SignatureModal;
