import { SignaturePad } from '@ema-platform/ui';
import {
  useDeleteMySignatureMutation,
  useGetMySignatureQuery,
  useUploadMySignatureMutation,
} from '../api/signature-api';

/**
 * The seafarer's own specimen signature, printed on documents issued to them
 * (`{{seafarerSignature}}`). Distinct from an officer's signing signature,
 * which the backoffice manages against a different endpoint.
 */
export function MySignaturePad() {
  const { data, isLoading } = useGetMySignatureQuery();
  const [upload, { isLoading: isUploading }] = useUploadMySignatureMutation();
  const [remove, { isLoading: isDeleting }] = useDeleteMySignatureMutation();

  return (
    <SignaturePad
      currentUrl={data?.url ?? null}
      isLoading={isLoading}
      isUploading={isUploading}
      isDeleting={isDeleting}
      onUpload={(file) => upload(file).unwrap()}
      onDelete={() => remove().unwrap()}
    />
  );
}
