import {
  Meta,
  Canvas,
  Controls,
  Title,
  Subtitle,
} from '@storybook/addon-docs/blocks'

import { LifecycleTag, SourceLinks } from '../../docs/components'
import * as SegmentControllerStories from './SegmentController.stories'

<Meta of={SegmentControllerStories} title="Blocks/SegmentController" />

<Title>Segment Controller</Title>
<Subtitle>
  A segmented control component for single selection with mandatory selection
  behavior.
</Subtitle>

<SourceLinks
  links={[
    {
      label: 'shadcn/ui Toggle Group',
      href: 'https://ui.shadcn.com/docs/components/toggle-group',
    },
    {
      label: 'Radix UI Toggle Group API',
      href: 'https://www.radix-ui.com/primitives/docs/components/toggle-group#api-reference',
    },
  ]}
/>
<LifecycleTag variant="In Development" />

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

This component is built on top of [Radix UI's Toggle Group](https://www.radix-ui.com/primitives/docs/components/toggle-group#api-reference). For more details on API and accessibility, refer to the official Radix documentation.

## Usage

Import the segment controller from `@chainlink/blocks`

```tsx
import { SegmentController, SegmentControllerItem } from '@chainlink/blocks'

export const Example = () => {
  return (
    <SegmentController
      defaultValue="option1"
      onValueChange={(value) => console.log(value)}
    >
      <SegmentControllerItem value="option1">Option 1</SegmentControllerItem>
      <SegmentControllerItem value="option2">Option 2</SegmentControllerItem>
      <SegmentControllerItem value="option3">Option 3</SegmentControllerItem>
    </SegmentController>
  )
}
```

## Examples

### Small Size

<Canvas of={SegmentControllerStories.Small} sourceState="shown" />

### Extra Small Size

<Canvas of={SegmentControllerStories.ExtraSmall} sourceState="shown" />

### Unit Selection Example

A practical example showing currency unit selection.

<Canvas of={SegmentControllerStories.UnitExample} sourceState="shown" />

## Props

### SegmentController

- **`defaultValue`** (`string`) - Default selected value (required for proper functionality)
- **`value`** (`string`) - Controlled selected value
- **`onValueChange`** (`(value: string) => void`) - Callback when selection changes
- **`size`** (`"default" | "sm" | "xs"`) - Size variant for all items. Default: `"default"`

All other props from [Radix UI Toggle Group](https://www.radix-ui.com/primitives/docs/components/toggle-group#root) are also supported.

### SegmentControllerItem

- **`value`** (`string`) - The value for this item (required)
- **`variant`** (`"default" | "active"`) - Visual variant for this item. Default: `"default"`
- **`size`** (`"default" | "sm" | "xs"`) - Override size from SegmentController

All other props from [Radix UI Toggle Group Item](https://www.radix-ui.com/primitives/docs/components/toggle-group#item) are also supported.

## Features

- **Mandatory Selection**: One option must always be selected - users cannot deselect all options
- **Single Selection**: Only one option can be selected at a time
- **Segmented Control Styling**: Connected buttons with proper borders and hover states
- **Keyboard Navigation**: Full keyboard support via Radix UI
- **Accessibility**: ARIA attributes and screen reader support built-in