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

import { Size } from '../common';
import { Field } from '../field/Field';

import { SearchInput } from './SearchInput';

export default {
  component: SearchInput,
  title: 'Forms/SearchInput',
} satisfies Meta<typeof SearchInput>;

type Story = StoryObj<typeof SearchInput>;

export const Basic: Story = {
  render: (args) => <SearchInputBasic {...args} />,
  args: {
    size: Size.MEDIUM,
    shape: 'pill',
    disabled: false,
  },
  argTypes: {
    onChange: {
      action: 'changed',
    },
  },
  decorators: [
    (Story) => (
      <Field label="Label">
        <Story />
      </Field>
    ),
  ],
};

function SearchInputBasic({ onChange, ...restProps }: NonNullable<Story['args']>) {
  const [value, setValue] = useState('Text value');

  return (
    <SearchInput
      {...restProps}
      value={value}
      onChange={(event) => {
        setValue(event.currentTarget.value);
        onChange?.(event);
      }}
    />
  );
}