import { SignaturePad } from '@ema-platform/ui';
import {
  useDeleteMyEmployeeSignatureMutation,
  useGetMyEmployeeSignatureQuery,
  useUploadMyEmployeeSignatureMutation,
} from '../api/signature-api';

/** The signature drawn onto certificates this officer approves. */
export function MySignaturePad() {
  const { data, isLoading } = useGetMyEmployeeSignatureQuery();
  const [upload, { isLoading: isUploading }] =
    useUploadMyEmployeeSignatureMutation();
  const [remove, { isLoading: isDeleting }] =
    useDeleteMyEmployeeSignatureMutation();

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