import {
  Meta,
  Canvas,
  Source,
  Primary,
  Controls,
  Title,
  Description,
} from "@storybook/addon-docs/blocks";

import * as stories from "./switch.stories";

<Meta of={stories} />

```ts
import { SwitchModule } from "@bitwarden/components";
```

<Title />
<Description />

NOTE: The switch component will span 100% of the width of its container. These stories have a
container with a `max-width` of 600px

<Primary />
<Controls />

## Stories

### Default

<Canvas of={stories.Default} />

### Used with a form

<Canvas of={stories.WithForm} />

### With Long Label

<Canvas of={stories.WithLongLabel} />

### Inactive

<Canvas of={stories.Inactive} />

## Using in a group

Use `bit-form-control-group` to visually and semantically group related switches that belong to the
same category. The group provides layout, a shared label, and accessibility structure — each switch
still acts immediately when toggled.

Unlike checkboxes, switches in a group are **not tied together by shared form state**. Each switch
binds to its own `formControlName` and manages its own boolean value independently. The group does
not hold a collective value and cannot enforce cross-switch validation (e.g. "at least one must be
on"). If you need that kind of constraint, use checkboxes instead.

```html
<form [formGroup]="formObj">
  <bit-form-control-group>
    <bit-label>Notification preferences</bit-label>

    <bit-form-control-card icon="bwi-envelope">
      <bit-switch formControlName="emailNotifications"></bit-switch>
      <bit-label>Email notifications</bit-label>
      <bit-hint>Receive email updates for important activity</bit-hint>
    </bit-form-control-card>

    <bit-form-control-card icon="bwi-lock">
      <bit-switch formControlName="autoLock"></bit-switch>
      <bit-label>Auto-lock</bit-label>
      <bit-hint>Automatically lock after inactivity</bit-hint>
    </bit-form-control-card>
  </bit-form-control-group>
</form>
```

Choose a switch group when:

- Multiple independent on/off settings are related and benefit from being shown together
- Each toggle takes effect immediately (no save action required)

Use checkboxes in a group instead when the selections need to be saved via form submission or
validated as a batch.

### Group

<Canvas of={stories.FormControlCardGroup} />
