import { FormProvider, useForm } from 'react-hook-form';

import { Button } from '@mui/material';
import { type Meta, type StoryObj } from '@storybook/react-vite/*';

import { useModal } from '../../../../../hooks/useModal';

import HuFormSign from './form';
import HuSignDialog from '.';

const meta: Meta = {
  component: HuSignDialog,
  title: 'Composed Components/Sign/Documents/SignDialog',
  tags: ['autodocs'],
  argTypes: {},
  parameters: {
    docs: {
      source: {
        type: 'dynamic',
      },
    },
  },
};

export default meta;

type Story = StoryObj<typeof HuSignDialog>;

export const Default: Story = {
  render: () => {
    const onHandleSave = (signature: string | undefined) => {
      alert(signature);
      closeModal();
    };

    const { modal, showModal, closeModal } = useModal(
      HuSignDialog,
      { fullWidth: true },
      {
        onSave: onHandleSave,
        onClose: () => closeModal(),
      },
    );

    return (
      <>
        <Button
          onClick={() => showModal()}
          variant="primary"
        >
          Show Sign Modal
        </Button>
        {modal}
      </>
    );
  },
};

export const Loading: Story = {
  render: () => {
    const onHandleSave = (signature: string | undefined) => {
      alert(signature);
      closeModal();
    };

    const { modal, showModal, closeModal } = useModal(
      HuSignDialog,
      { fullWidth: true },
      {
        onSave: onHandleSave,
        onClose: () => closeModal(),
        loading: true,
      },
    );

    return (
      <>
        <Button
          onClick={() => showModal()}
          variant="primary"
        >
          Show Sign Modal
        </Button>
        {modal}
      </>
    );
  },
};

export const Form: Story = {
  render: () => {
    const form = useForm({
      defaultValues: {
        sign: undefined,
      },
    });

    const onHandleSave = (signature: string | undefined) => {
      alert(signature);
      closeModal();
    };

    const onHandleClose = () => {
      alert(form.getValues('sign'));
      closeModal();
    };

    const { modal, showModal, closeModal } = useModal(
      HuFormSign,
      { fullWidth: true },
      {
        name: 'sign',
        signProps: {
          onClose: onHandleClose,
          onSave: onHandleSave,
          title: 'Sign',
          minStrokes: 100,
        },
      },
    );

    return (
      <FormProvider {...form}>
        <Button
          onClick={() => showModal()}
          variant="primary"
        >
          Show Sign Modal
        </Button>
        {modal}
      </FormProvider>
    );
  },
};