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

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

type Story = StoryObj<typeof Select>;
const defaultArgs = {
  options: [
    {
      label: 'Option1',
      value: 'option1',
      disabled: false,
    },
    {
      label: 'Option2',
      value: 'option2',
      disabled: false,
    },
    {
      label: 'Option3',
      value: 'option3',
      disabled: true,
    },
    {
      label: 'Option4',
      value: 'option4',
      disabled: false,
    },
    {
      label: 'Option5',
      value: 'option5',
      disabled: true,
    },
    {
      label: 'Option6',
      value: 'option6',
      disabled: false,
    },
  ],
  placeholder: 'Select any option',
  showLabel: false,
};

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

export const ControlledVariants: Story = {
  render: () => {
    const [value, setValue] = useState<Option>();
    const onChangeHandler = (option: Option) => {
      setValue(option);
    };
    return (
      <div className="storybook-stories-select-container">
        <div className="storybook-stories-select-variants-container">
          <Select
            {...defaultArgs}
            showLabel={true}
            labelProps={{ label: 'With Label' }}
            selectedOption={value}
            onChange={onChangeHandler}
          />
        </div>
        <div className="storybook-stories-select-variants-container">
          <Select
            {...defaultArgs}
            showLabel={true}
            error={true}
            errorMsg="Error message"
            labelProps={{ label: 'Error Select', required: true }}
            selectedOption={value}
            onChange={onChangeHandler}
          />
        </div>
        <div className="storybook-stories-select-variants-container">
          <Select
            {...defaultArgs}
            showLabel={true}
            disabled={true}
            labelProps={{ label: 'Read Only' }}
            selectedOption={value}
          />
        </div>
        <div className="storybook-stories-select-variants-container">
          <Select
            {...defaultArgs}
            showLabel={true}
            labelProps={{ label: 'Pre selected value' }}
            selectedOption={value || defaultArgs.options[1]}
            onChange={onChangeHandler}
          />
        </div>
      </div>
    );
  },
};

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

export const SelectWithNoBorderOnHover: Story = {
  args: {
    ...defaultArgs,
    labelProps: { label: 'Select with no border on hover' },
    showBorderOnHover: false,
    showLabel: true,
  },
};

export const SelectWithNoOptions: Story = {
  args: {
    ...defaultArgs,
    options: [],
    labelProps: { label: 'Select with no options' },
  },
};

export default meta;