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

import Button from '@material-hu/components/design-system/Buttons/Button';
import HuCardContainer from '@material-hu/components/design-system/CardContainer';

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

import Signature from './Signature';
import SignatureActions from './SignatureActions';

export type SignCardProps = {
  onChange?: () => void;
  onDelete?: () => void;
  onAdd?: () => void;
  disabled?: boolean;
  src: string;
};

export const SignCard = ({
  onDelete = () => null,
  onChange = () => null,
  onAdd = () => null,
  disabled = false,
  src,
}: SignCardProps) => {
  const theme = useTheme();
  const { t } = useLokaliseTranslation('web_only');

  return (
    <HuCardContainer
      sx={{
        width: '100%',
        '& .MuiCardContent-root': {
          position: 'relative',
          alignItems: 'center',
          justifyContent: 'center',
          ...(src
            ? {
                backgroundColor: theme.palette.new.background.elements.grey,
              }
            : undefined),
        },
      }}
    >
      {!src && (
        <Button
          variant="secondary"
          onClick={onAdd}
          disabled={disabled}
        >
          {t('form_inputs.add_signature')}
        </Button>
      )}
      {src && (
        <>
          <SignatureActions
            onDelete={onDelete}
            onChange={onChange}
            disabled={disabled}
            sx={{
              position: 'absolute',
              top: theme.spacing(2),
              right: theme.spacing(2),
            }}
          />
          <Signature src={src} />
        </>
      )}
    </HuCardContainer>
  );
};

export default SignCard;