import type { Meta, StoryObj } from '@storybook/react'
import { SvgAdd1 } from '@chainlink/blocks-icons'
import { DROPDOWN_SIZE_OPTIONS } from '../dropdownHeights'
import { SimpleSelect, type SimpleSelectOption } from './SimpleSelect'

const simpleSelectOptions = [
  { label: 'Option 1', value: 'option1' },
  { label: 'Option 2', value: 'option2' },
  { label: 'Option 3', value: 'option3', Icon: <SvgAdd1 /> },
] satisfies SimpleSelectOption<string>[]

const meta = {
  component: SimpleSelect,
  title: 'Form/Select/SimpleSelect',
  args: {
    className: 'max-w-96',
    disabled: false,
    options: simpleSelectOptions,
    placeholder: 'Select an option',
  },
  argTypes: {
    size: {
      control: 'select',
      options: DROPDOWN_SIZE_OPTIONS,
    },
    disabled: { control: 'boolean' },
    options: { control: 'object' },
    onValueChange: { control: false },
    defaultOpen: { control: false },
    value: { control: false },
    defaultValue: { control: false },
  },
} satisfies Meta<typeof SimpleSelect>

export default meta

type Story = StoryObj<typeof meta>

export const Default: Story = {
  render: (_args) => (
    <SimpleSelect
      className="max-w-96"
      options={[
        { label: 'Option 1', value: 'option1' },
        { label: 'Option 2', value: 'option2' },
        { label: 'Option 3', value: 'option3', Icon: <SvgAdd1 /> },
      ]}
      placeholder="Select an option"
    />
  ),
}

export const PreSelected: Story = {
  render: (_args) => (
    <SimpleSelect
      className="max-w-96"
      defaultValue="option1"
      options={[
        { label: 'Option 1', value: 'option1' },
        { label: 'Option 2', value: 'option2' },
        { label: 'Option 3', value: 'option3', Icon: <SvgAdd1 /> },
      ]}
      placeholder="Select an option"
    />
  ),
  parameters: {
    docs: {
      description: {
        story:
          'Use defaultValue for uncontrolled selects with an initial selection.',
      },
    },
  },
}

export const Controlled: Story = {
  render: (_args) => (
    <SimpleSelect
      className="max-w-96"
      onValueChange={() => undefined}
      options={[
        { label: 'Option 1', value: 'option1' },
        { label: 'Option 2', value: 'option2' },
        { label: 'Option 3', value: 'option3', Icon: <SvgAdd1 /> },
      ]}
      placeholder="Select an option"
      value="option3"
    />
  ),
  parameters: {
    docs: {
      description: {
        story:
          'Use value and onValueChange when the selected option is owned by parent state.',
      },
    },
  },
}

export const Disabled: Story = {
  args: {
    className: 'max-w-96',
    defaultValue: 'option2',
    disabled: true,
    options: simpleSelectOptions,
    placeholder: 'Select an option',
  },
}

export const Small: Story = {
  render: (_args, context) => {
    const openProp = context.viewMode === 'story' ? { defaultOpen: true } : {}

    return (
      <SimpleSelect
        className="max-w-96"
        defaultValue="option1"
        options={simpleSelectOptions}
        placeholder="Select an option"
        size="sm"
        {...openProp}
      />
    )
  },
}

export const Xs: Story = {
  render: (_args, context) => {
    const openProp = context.viewMode === 'story' ? { defaultOpen: true } : {}

    return (
      <SimpleSelect
        className="max-w-96"
        defaultValue="option1"
        options={simpleSelectOptions}
        placeholder="Select an option"
        size="xs"
        {...openProp}
      />
    )
  },
}