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

import Button from '@design-system/Buttons/Button';
import { Stack } from '@mui/material';
import { type Meta, type StoryObj } from '@storybook/react-vite';

import FormInputOtp from './form';
import InputOtp from '.';

const meta: Meta<typeof InputOtp> = {
  component: InputOtp,
  title: 'Design System/Inputs/OTP',
  tags: ['autodocs'],
  argTypes: {
    label: { control: 'text' },
    helperText: { control: 'text' },
    length: { control: 'number' },
    password: { control: 'boolean' },
    rounded: { control: 'boolean' },
    error: { control: 'boolean' },
    success: { control: 'boolean' },
    disabled: { control: 'boolean' },
    autoFocus: { control: 'boolean' },
    value: { control: false },
    onChange: { control: false },
    onComplete: { control: false },
    sx: { control: false },
  },
  args: {
    label: 'Label',
  },
  render: props => {
    const [state, setState] = useState(props.value ?? '');
    return (
      <Stack sx={{ width: 450 }}>
        <InputOtp
          {...props}
          onChange={setState}
          value={state}
        />
      </Stack>
    );
  },
};

export default meta;

type Story = StoryObj<typeof InputOtp>;

export const Default: Story = {
  args: {},
};

export const Password: Story = {
  args: {
    password: true,
  },
};

export const Rounded: Story = {
  args: {
    password: true,
    rounded: true,
  },
};

export const HelperText: Story = {
  args: {
    helperText: 'Helper text',
  },
};

export const Disabled: Story = {
  args: {
    disabled: true,
  },
};

export const Success: Story = {
  args: {
    success: true,
    helperText: 'Validated code ',
    value: '012345',
  },
};

export const Error: Story = {
  args: {
    error: true,
    helperText: 'Code is invalid',
    value: '007',
  },
};

export const ExecWhenCompleted: Story = {
  args: {
    onComplete: () => {
      // eslint-disable-next-line no-console
      console.info('Completed!');
    },
  },
};

export const Form: StoryObj<typeof FormInputOtp> = {
  render: () => {
    const form = useForm({
      defaultValues: {
        otp: '',
      },
    });

    const { watch } = form;

    return (
      <Stack sx={{ gap: 2 }}>
        <FormProvider {...form}>
          <FormInputOtp name="otp" />
        </FormProvider>
        <pre>{JSON.stringify(watch(), null, 2)}</pre>
      </Stack>
    );
  },
};

export const FormDisabled: StoryObj<typeof FormInputOtp> = {
  render: () => {
    const form = useForm({
      defaultValues: {
        otp: '1,2,3,4,5,6',
      },
    });

    const submit = () => {
      form.handleSubmit(data => {
        alert(JSON.stringify(data, null, 2));
      })();
    };

    return (
      <Stack sx={{ gap: 2 }}>
        <FormProvider {...form}>
          <FormInputOtp
            name="otp"
            inputOtpProps={{ disabled: true }}
          />
          <Button onClick={submit}>Submit</Button>
        </FormProvider>
      </Stack>
    );
  },
};
