import { useState } from "react";
import {
  Meta,
  Preview,
  Story,
  Props,
  SourceState,
} from "@storybook/addon-docs/blocks";
import { ComponentHeading } from "../../storybook-components";
import { ORIENTATION } from "../..";
import { Checkbox } from "./Checkbox";

<Meta title="Components/Forms/Checkbox" component={Checkbox} />

<ComponentHeading
  componentName="Checkbox"
  description="A component that expands/collapses vertically when clicked"
  sourcePath="src/components/Checkbox/Checkbox.tsx"
/>

```jsx
import { Checkbox } from "@aptible/arrow-ds";
```

<Preview>
  <Story name="Checkbox">
    {() => {
      const [checked, setChecked] = useState(true);
      return (
        <Checkbox
          onClick={() => setChecked(!checked)}
          checked={checked}
          label="Checkbox"
        />
      );
    }}
  </Story>
</Preview>

## Props

<Props of={Checkbox} />

## Demos

### Disabled

<Preview withSource={SourceState.OPEN}>
  <Story name="Disabled">
    <Checkbox.Group>
      <Checkbox label="Unchecked" />
      <Checkbox label="Checked" checked />
      <Checkbox label="Disabled" disabled />
      <Checkbox label="Checked + Disabled" checked disabled />
    </Checkbox.Group>
  </Story>
</Preview>

### Group Vertical

<Preview withSource={SourceState.OPEN}>
  <Story name="Group - Vertical">
    <Checkbox.Group>
      <Checkbox label="Choice One" />
      <Checkbox label="Choice Two" />
      <Checkbox label="Choice Three" />
    </Checkbox.Group>
  </Story>
</Preview>

### Group Horizontal

<Preview withSource={SourceState.OPEN}>
  <Story name="Group - Horizontal">
    <Checkbox.Group orientation={ORIENTATION.HORIZONTAL}>
      <Checkbox label="Choice One" />
      <Checkbox label="Choice Two" />
      <Checkbox label="Choice Three" />
    </Checkbox.Group>
  </Story>
</Preview>