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

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

import FormInputSearch from './form';
import InputSearch from '.';

const meta: Meta<typeof InputSearch> = {
  component: InputSearch,
  title: 'Design System/Search',
  tags: ['autodocs'],
  argTypes: {
    variant: {
      control: 'radio',
      options: ['classic', 'custom'],
      table: { defaultValue: { summary: 'classic' } },
    },
    label: { control: 'text' },
    placeholder: { control: 'text' },
    helperText: { control: 'text' },
    errorText: { control: 'text' },
    error: { control: 'boolean' },
    success: { control: 'boolean' },
    disabled: { control: 'boolean' },
    fullWidth: { control: 'boolean' },
    sx: { control: false },
  },
  args: {
    variant: 'classic',
  },
};

export default meta;

type Story = StoryObj<typeof InputSearch>;

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

export const Custom: Story = {
  args: {
    variant: 'custom',
  },
};

export const Error: Story = {
  args: {
    helperText: 'HelperText',
    errorText: 'Error text',
    value: 'value!',
    error: true,
  },
};

export const Success: Story = {
  args: {
    helperText: 'HelperText',
    errorText: 'Error text',
    value: 'value!',
    success: true,
  },
};

export const Disabled: Story = {
  args: {
    helperText: 'HelperText',
    errorText: 'Error text',
    disabled: true,
  },
};

export const FormSearchStory: Story = {
  render: () => {
    const form = useForm({
      defaultValues: {
        myInput: '',
      },
    });
    return (
      <FormProvider {...form}>
        <FormInputSearch name="myInput" />
      </FormProvider>
    );
  },
};