import { Meta, StoryObj } from '@storybook/react';
import InputField from './Input';
import { ChangeEvent, useState } from 'react';

const meta: Meta<typeof InputField> = {
  title: 'Components/Input',
  component: InputField,
  parameters: { layout: 'centered' },
  tags: ['autodocs'],
};

type Story = StoryObj<typeof InputField>;

const defaultArgs = {
  name: 'input',
  label: '',
  disabled: false,
  placeholder: 'Enter your name',
  value: '',
  type: 'text',
};

export const Primary: Story = {
  args: {
    ...defaultArgs,
    label: 'Name',
    variant: 'primary',
    type: 'text',
  },
};

export const Success: Story = {
  args: {
    ...defaultArgs,
    variant: 'success',
    helperText: 'Success text',
    showMessageIcon: true,
    className: '',
    type: 'text',
  },
};

export const Warning: Story = {
  args: {
    ...defaultArgs,
    variant: 'warning',
    helperText: 'Warning text',
    showMessageIcon: true,
    type: 'text',
  },
};

export const Danger: Story = {
  args: {
    ...defaultArgs,
    variant: 'danger',
    helperText: 'Error text',
    showMessageIcon: true,
    type: 'text',
  },
};

export const Disabled: Story = {
  args: {
    ...defaultArgs,
    label: 'Name',
    variant: 'info',
    disabled: true,
    helperText: 'Disable text',
    showMessageIcon: true,
    type: 'text',
  },
};

export const WithValue: Story = {
  render: () => {
    const [value, setValue] = useState<string>('Web Element');
    const [error, setError] = useState<boolean>(false);
    const [helperText, setHelperText] = useState<string>();
    const onChangeHandler = (event: ChangeEvent<HTMLInputElement>) => {
      const value = event.target.value;
      if (event.target.required) {
        if (value.length <= 0) {
          setError(true);
          setHelperText(`${event?.target?.name} is required`);
        } else {
          setError(false);
          setHelperText('');
        }
      }
      setValue(value);
    };
    return (
      <>
        <InputField
          {...defaultArgs}
          type="text"
          onChange={onChangeHandler}
          disabled={false}
          value={value}
          name="Element Name"
          label="Element Name"
          placeholder="Enter element name"
          variant="primary"
          required={true}
          error={error}
          helperText={helperText}
        />
      </>
    );
  },
};

export const Controlled: Story = {
  render: () => {
    const [value, setValue] = useState<string>('');
    const [error, setError] = useState<boolean>(true);
    const [helperText, setHelperText] = useState<string>('Field is required');

    const onChangeHandler = (event: ChangeEvent<HTMLInputElement>) => {
      const value = event.target.value;
      if (event.target.required) {
        if (value.length <= 0) {
          setError(true);
          setHelperText('Field is required');
        } else {
          setError(false);
          setHelperText('');
        }
      }
      setValue(value);
    };

    return (
      <>
        <InputField
          {...defaultArgs}
          type="text"
          onChange={onChangeHandler}
          disabled={false}
          value={value}
          name="name"
          label="Name"
          variant="primary"
          required={true}
          error={error}
          helperText={helperText}
        />
      </>
    );
  },
};

export const Number: Story = {
  render: () => {
    const [value, setValue] = useState<string>('1');
    const [minValue, setMinValue] = useState<number>(-Infinity);
    const [maxValue, setMaxValue] = useState<number>(Infinity);

    const onChangeHandler = (event: React.ChangeEvent<HTMLInputElement>) => {
      setValue(String(event.target.value));
    };

    return (
      <>
        <InputField
          {...defaultArgs}
          onChange={onChangeHandler}
          disabled={false}
          value={value}
          placeholder="0"
          name="name"
          type="number"
          minValue={minValue}
          maxValue={maxValue}
          setValue={setValue}
        />
      </>
    );
  },
};

export default meta;