import React, { useState } from 'react';
import { Meta, StoryObj } from '@storybook/react';
import Autocomplete, { Option } from './Autocomplete';

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

type Story = StoryObj<typeof Autocomplete>;

const defaultArgs = {
  options: [
    { id: 1, label: 'Option1' },
    { id: 2, label: 'Option2' },
    { id: 3, label: 'Option3' },
    { id: 4, label: 'Option4' },
    { id: 5, label: 'Option5' },
    { id: 6, label: 'Option6' },
  ],
  placeholder: 'Search and select file name',
  showLabel: false,
};

export const BasicAutocomplete: Story = {
  args: {
    ...defaultArgs,
  },
};

export const ControlledAutocomplete: Story = {
  render: () => {
    const [value, setValue] = useState<string | undefined>(undefined);
    const onChangeHandler = (option: Option) => {
      setValue(option.label);
    };
    const onClear = () => {
      setValue(undefined);
    };
    return (
      <div className="storybook-stories-autocomplete-container">
        {['Autocomplete (Controlled)', 'Error Select', 'Read Only'].map(
          (label, index) => (
            <div
              className="storybook-stories-autocomplete-variants-container"
              key={index}
            >
              <Autocomplete
                {...defaultArgs}
                showLabel
                labelProps={{ label }}
                onChange={onChangeHandler}
                onClear={onClear}
                {...(label === 'Error Select' && {
                  error: true,
                  errorMsg: 'Error message',
                  labelProps: { label, required: true },
                })}
                {...(label === 'Read Only' && { disabled: true })}
              />
            </div>
          )
        )}
      </div>
    );
  },
};

export const AutocompleteWithNoBorder: Story = {
  args: {
    ...defaultArgs,
    labelProps: { label: 'Autocomplete with no border' },
    showBorder: false,
    showLabel: true,
    disabled: true,
  },
};

export const AutocompleteBorderOnHover: Story = {
  args: {
    ...defaultArgs,
    labelProps: { label: 'Border on Hover' },
    showBorderOnHover: false,
    showLabel: true,
  },
};

export const AutocompleteWithNoOptions: Story = {
  args: {
    ...defaultArgs,
    options: [],
    labelProps: { label: 'Autocomplete with no options' },
    showLabel: true,
  },
};

export default meta;