import type { Meta, StoryObj } from '@storybook/react'
import React from 'react'
import { createSizeDecorator } from '../../utils/decorators'
import {
  NestedCheckbox,
  NestedCheckboxToggle,
  NestedCheckboxOption,
} from './NestedCheckbox'

const meta: Meta<typeof NestedCheckbox> = {
  title: 'Form/Checkbox/NestedCheckbox',
  component: NestedCheckbox,
  decorators: [createSizeDecorator('XS')],
}

export default meta

type Story = StoryObj<typeof meta>

export const Default: Story = {
  render: (args) => (
    <NestedCheckbox {...args}>
      <NestedCheckboxToggle>Select All</NestedCheckboxToggle>
      <NestedCheckboxOption id="option1">Option 1</NestedCheckboxOption>
      <NestedCheckboxOption id="option2">Option 2</NestedCheckboxOption>
    </NestedCheckbox>
  ),
}

export const Disabled: Story = {
  args: {
    disabled: true,
  },
  render: (args) => (
    <NestedCheckbox {...args}>
      <NestedCheckboxToggle>Select All (Disabled)</NestedCheckboxToggle>
      <NestedCheckboxOption id="option1">Option 1</NestedCheckboxOption>
      <NestedCheckboxOption id="option2">Option 2</NestedCheckboxOption>
    </NestedCheckbox>
  ),
}

const ControlledStory = (_args: Story['args']) => {
  const [selected, setSelected] = React.useState<string[]>([])
  return (
    <NestedCheckbox value={selected} onValueChange={setSelected}>
      <NestedCheckboxToggle>Select All (Controlled)</NestedCheckboxToggle>
      <NestedCheckboxOption id="option1">Option 1</NestedCheckboxOption>
      <NestedCheckboxOption id="option2">Option 2</NestedCheckboxOption>
      <NestedCheckboxOption id="option3">Option 3</NestedCheckboxOption>
    </NestedCheckbox>
  )
}

export const Controlled: Story = {
  render: () => <ControlledStory />,
}

export const Nested: Story = {
  render: (args) => (
    <NestedCheckbox {...args}>
      <NestedCheckboxToggle>Select All</NestedCheckboxToggle>
      <NestedCheckboxOption id="option1">Option 1</NestedCheckboxOption>
      <NestedCheckboxOption id="option2">Option 2</NestedCheckboxOption>
      <NestedCheckbox>
        <NestedCheckboxToggle>Option 3</NestedCheckboxToggle>
        <NestedCheckboxOption id="option3-1">Option 3-1</NestedCheckboxOption>
        <NestedCheckboxOption id="option3-2">Option 3-2</NestedCheckboxOption>
      </NestedCheckbox>
    </NestedCheckbox>
  ),
}