import { type MutableRefObject } from 'react';
import SignatureScreen from 'react-signature-canvas';

import Container from '@material-hu/mui/Container';
import { useTheme } from '@material-hu/mui/styles';

import HuDialog from '@material-hu/components/design-system/Dialog';

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

export type SignDialogProps = {
  onCancel?: () => void;
  onAccept?: () => void;
  onClose?: () => void;
  loading?: boolean;
  signRef: MutableRefObject<any>;
  isEdit?: boolean;
};

export const SignDialog = ({
  onCancel = () => null,
  onAccept = () => null,
  onClose = () => null,
  loading = false,
  signRef,
  isEdit = false,
}: SignDialogProps) => {
  const { t } = useLokaliseTranslation('web_only');
  const { palette } = useTheme();

  return (
    <HuDialog
      onClose={onClose}
      title={t('form_inputs.sign')}
      primaryButtonProps={{
        children: isEdit ? t('general:save_changes') : t('general:sign'),
        onClick: onAccept,
        loading,
      }}
      secondaryButtonProps={{
        children: t('general:cancel'),
        onClick: onCancel,
      }}
      body={
        <Container
          sx={{
            width: '100%',
            height: '100%',
            padding: '0px !important',
            '& .signature': {
              border: '1px solid',
              borderColor: palette.new.border.neutral.default,
              borderRadius: '16px',
              width: '100%',
              height: '100%',
              backgroundColor: palette.new.background.elements.grey,
            },
          }}
        >
          <SignatureScreen
            ref={signRef}
            canvasProps={{ className: 'signature' }}
          />
        </Container>
      }
    />
  );
};

export default SignDialog;