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

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

import { type InputProps } from '../Classic/types';

import FormInputPassword from './form';
import InputPassword from '.';

const meta: Meta<typeof InputPassword> = {
  component: InputPassword,
  title: 'Design System/Inputs/Password',
  tags: ['autodocs'],
  argTypes: {
    label: { control: 'text' },
    placeholder: { control: 'text' },
    helperText: { control: 'text' },
    errorText: { control: 'text' },
    labelTooltip: { control: 'text' },
    error: { control: 'boolean' },
    success: { control: 'boolean' },
    disabled: { control: 'boolean' },
    fullWidth: { control: 'boolean' },
    hasCounter: { control: 'boolean' },
    hideErrorText: { control: 'boolean' },
    startAdornment: { control: false },
    onKeyDown: { control: false },
    onBlur: { control: false },
    slotProps: { control: false },
    sx: { control: false },
  },
  args: {
    value: 'value!',
  },
};

export default meta;

type Story = StoryObj<InputProps>;

export const NoLabel: Story = {
  args: {
    placeholder: 'Placeholder',
  },
};

export const DefaultWithHelper: Story = {
  args: {
    placeholder: 'Placeholder',
    label: 'Label',
    helperText: 'Helper',
  },
};

export const InputSmall: Story = {
  args: {
    placeholder: 'Placeholder',
    size: 'small',
  },
};

export const Error: Story = {
  args: {
    placeholder: 'Placeholder',
    label: 'Label',
    helperText: 'Helper text',
    errorText: 'Error text',
    value: 'value!',
    error: true,
  },
};

export const Success: Story = {
  args: {
    placeholder: 'Placeholder',
    label: 'Label',
    helperText: 'Helper text',
    errorText: 'Error text',
    value: 'value!',
    success: true,
  },
};

export const Disabled: Story = {
  args: {
    placeholder: 'Placeholder',
    label: 'Label',
    helperText: 'Helper text',
    errorText: 'Error text',
    value: 'value!',
    disabled: true,
  },
};

export const FormInputPasswordStory: Story = {
  args: {
    placeholder: 'Placeholder',
    label: 'Label',
    helperText: 'Helper text',
    errorText: 'Error text',
    value: 'value!',
    disabled: false,
    error: false,
  },
  render: args => {
    const form = useForm({
      defaultValues: {
        myInput: '',
      },
      mode: 'onChange',
    });
    return (
      <FormProvider {...form}>
        <FormInputPassword
          inputProps={{
            placeholder: args.placeholder,
            label: args.label,
            helperText: args.helperText,
            hasCounter: args.hasCounter,
            errorText: args.errorText,
            disabled: args.disabled,
          }}
          rules={{ required: true }}
          name="myInput"
        />
      </FormProvider>
    );
  },
};