import type { Meta, StoryObj } from '@storybook/react-vite'
import React from 'react'
import { useArgs } from 'storybook/preview-api'

import DrawerSelect from './DrawerSelect'
import { DocsTemplate } from '../../../.storybook'

const meta: Meta<typeof DrawerSelect> = {
  title: 'Components/DrawerSelect',
  component: DrawerSelect,
  parameters: {
    docs: {
      page: () => (
        <DocsTemplate
          description={
            <span>
              The <code>DrawerSelect</code> component provides a selection
              interface that opens in a <code>SideDrawer</code>. It allows users
              to choose from a list of options. This component is ideal for
              interfaces where users need to select from a potentially large
              list of options.
            </span>
          }
        />
      ),
    },
  },
}
export default meta

type Story = StoryObj<typeof DrawerSelect>

const Template: Story = {
  render: function Render(args) {
    const [{ options, active }, updateArgs] = useArgs()

    function onChange(option) {
      updateArgs({ active: option })
    }

    return (
      <DrawerSelect
        {...args}
        active={active}
        options={options}
        setActive={onChange}
      />
    )
  },
}

export const Basic: Story = {
  ...Template,
  args: {
    options: Array.from({ length: 20 }, (_, index) => ({
      name: `option_${index + 1}`,
      label: `Option ${index + 1}`,
    })),
    header: 'Header',
    placeholder: 'Select an option',
  },
}

export const Active: Story = {
  ...Template,
  args: {
    ...Basic.args,
    active: {
      name: 'option_5',
      label: 'Option 5',
    },
  },
}

export const Icon: Story = {
  ...Template,
  args: {
    ...Basic.args,
    buttonIcon: 'plus',
  },
}

export const Disabled: Story = {
  ...Template,
  args: {
    ...Basic.args,
    options: [
      {
        name: 'option_1',
        label: 'Option 1',
      },
    ],
    active: {
      name: 'option_1',
      label: 'Option 1',
    },
    disabled: true,
  },
}

export const Loading: Story = {
  ...Template,
  args: {
    ...Basic.args,
    loading: true,
  },
}