import {
  Title,
  Meta,
  Subtitle,
  Description,
  Canvas,
  Controls,
  Story,
  Source,
} from '@storybook/addon-docs/blocks'
import * as NestedCheckboxStories from './NestedCheckbox.stories'
import { LifecycleTag } from '../../docs/components/LifecycleTag'

<Meta title="Form/Checkbox/NestedCheckbox" of={NestedCheckboxStories} />

<Title>NestedCheckbox</Title>
<Subtitle>
  A parent-child checkbox component that allows selecting or deselecting all
  child options from a single parent control.
</Subtitle>
<LifecycleTag variant="Stable" />

<Description>
  `NestedCheckbox` groups a parent checkbox (typically labelled "Select All")
  with multiple option checkboxes. Checking the parent will select every option;
  unchecking it will clear all. The parent renders an indeterminate state when
  some but not all options are selected. Disabled state can be propagated to the
  entire group via the <code>disabled</code> prop.
</Description>

<Canvas
  of={NestedCheckboxStories.Default}
  layout="padded"
  sourceState="shown"
/>
<Controls of={NestedCheckboxStories.Default} />

<div className="h-8" />

## Components

- `NestedCheckbox`: The root container component. Provides the layout and spacing for the parent checkbox and its supporting elements,
- `NestedCheckboxToggle`: Displays a toggle for the parent checkbox
- `NestedCheckboxOption`: Displays an option checkbox

## Usage

### Uncontrolled Mode

Import the components and wrap the parent checkbox and its options in a `NestedCheckbox` component.

```tsx
import {
  NestedCheckbox,
  NestedCheckboxToggle,
  NestedCheckboxOption,
  CheckboxLabel,
} from '@chainlink/blocks'

export default function Example() {
  return (
    <NestedCheckbox>
      <CheckboxLabel>
        <NestedCheckboxToggle />
        Select All
      </CheckboxLabel>

      <CheckboxLabel>
        <NestedCheckboxOption id="option1" />
        Option 1
      </CheckboxLabel>

      <CheckboxLabel>
        <NestedCheckboxOption id="option2" />
        Option 2
      </CheckboxLabel>
    </NestedCheckbox>
  )
}
```

### Controlled Mode

In controlled mode, the `value` and `onValueChange` props are used to manage the selected options.

```tsx
export const Controlled = () => {
  const [selected, setSelected] = React.useState<string[]>([
    'option1',
    'option2',
  ])

  return (
    <NestedCheckbox value={selected} onValueChange={setSelected}>
      <CheckboxLabel>
        <NestedCheckboxToggle />
        Select All (Controlled)
      </CheckboxLabel>
      <CheckboxLabel>
        <NestedCheckboxOption id="option1" />
        Option 1
      </CheckboxLabel>
      <CheckboxLabel>
        <NestedCheckboxOption id="option2" />
        Option 2
      </CheckboxLabel>
      <CheckboxLabel>
        <NestedCheckboxOption id="option3" />
        Option 3
      </CheckboxLabel>
    </NestedCheckbox>
  )
}
```

## Examples

### Basic Parent with Options

<Canvas of={NestedCheckboxStories.Default} sourceState="shown" />

### Disabled State

<Canvas of={NestedCheckboxStories.Disabled} sourceState="shown" />