import { ArgsTable, Meta, Story } from "@storybook/addon-docs";
import { ComponentInfo, Preview, Tagline } from "@stories/components";
import { Counter } from "@components/counter";
import { PlaceholderMajorIcon } from "@components/icons";
import { Inline } from "@components/layout";
import { InnerSwitch, Switch } from "@components/switch";
import { Text } from "@components/typography";

<Meta
    title="Components/Switch"
    id="switch"
/>

# Switch

<Tagline>A switch offers an on or off choice to a user.</Tagline>

<ComponentInfo
    usage={"import { Switch } from \"@sharegate/orbit-ui\";"}
    ariaPath="checkbox"
    githubPath="/packages/components/src/switch/src"
/>

## Guidelines

### When to use

- To trigger an immediate action such as an activation/deactivation.

### Content

- Have a short and descriptive label.
- Be self explanatory without relying on an icon. Using an icon to carry information will render it non-accessible.

### Accessibility

- Do not change the label based on the state of the switch. The label should represent the "on/checked" state of the switch.

### Checkbox, Radio or Switch

- If the objective is to select multiples elements from a list, the [checkbox](?path=/docs/checkbox--default-story) should be used instead.
- If the objective is to select one value out of a set of elements the [radio](?path=/docs/radio--default-story) should be used instead.

## Usage

### Default

A default switch.

<Preview>
    <Story name="default">
        <Switch>Engines</Switch>
    </Story>
</Preview>

### Checked

A switch can be checked.

<Preview>
    <Story name="checked">
        <Switch defaultChecked>Engines</Switch>
    </Story>
</Preview>

### No label

A switch can be rendered without a label.

<Preview>
    <Story name="no label">
        <Switch aria-label="Engines" />
    </Story>
</Preview>

### Disabled

A switch can be disabled.

<Preview>
    <Story name="disabled">
        <Switch disabled>Engines</Switch>
    </Story>
</Preview>

### Icon

A switch can have [icons](?path=/docs/icon-gallery--page) after his text.

<Preview>
    <Story name="icon">
        <Switch>
            <Text>Pressurization</Text>
            <PlaceholderMajorIcon />
        </Switch>
    </Story>
</Preview>

### Counter

A switch can have a [counter](?path=/docs/counter--default-story) after his text.

<Preview>
    <Story name="counter">
        <Switch>
            <Text>Engines</Text>
            <Counter>6</Counter>
        </Switch>
    </Story>
</Preview>

### Size

A switch can vary in size.

<Preview>
    <Story name="size">
        <Inline alignY="center">
            <Switch size="sm">Engines</Switch>
            <Switch>Engines</Switch>
        </Inline>
    </Story>
</Preview>

### Reverse

A checkbox checkmark can be to the left or to the right of his label.

<Preview>
    <Story name="reverse">
        <Switch reverse>
            <PlaceholderMajorIcon />
            <Text>Engines</Text>
            <Counter variant="divider">6</Counter>
        </Switch>
    </Story>
</Preview>

### Validation

A switch can display a validation state to communicate to the user whether the current value is valid or invalid. Implement your own validation logic in your app and pass either `"valid"` or `"invalid"` to the input via the `validationState` prop.

The example below illustrates how one would validate if the user has checked the switch.

<Preview filePath="/switch/docs/CheckedValidation" />

### Controlled

A switch can handle `checked` state in controlled mode.

<Preview filePath="/switch/docs/ControlledSwitch" />

## API

### Switch

<ComponentInfo
    usage={"import { Switch } from \"@sharegate/orbit-ui\";"}
    slots={["label", "icon", "counter"]}
    inherits={[InnerSwitch.defaultElement, "styled-component"]}
    compact
/>

<ArgsTable of={InnerSwitch} sort="alpha"/>

