import { useState } from "react";
import {
  Meta,
  Canvas,
  Story,
  ArgsTable,
  SourceState,
} from "@storybook/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"
/>

## Installation

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

## Basic usage

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

## API

<ArgsTable of={Checkbox} />

## Demos

### Indeterminate

Here’s a demo of how you could implement an indeterminate checkbox.

The `checked` prop accepts the string `"indeterminate"` in order to display
an indeterminate state.

<Canvas withSource={SourceState.OPEN}>
  <Story name="Indeterminate">
    {() => {
      const choices = ["A", "B", "C", "D"];
      const choicesLength = choices.length;
      const [indeterminate, setIndeterminate] = useState(false);
      const [total, setTotal] = useState(0);
      const chooseNone = new Array(choicesLength).fill(false);
      const chooseAll = new Array(choicesLength).fill(true);
      const [checkedState, setCheckedState] = useState(chooseNone);
      const onChange = (position) => {
        const updatedCheckedState = checkedState.map((item, index) =>
          index === position ? !item : item,
        );
        setCheckedState(updatedCheckedState);
        setTotal(() => {
          const tote = updatedCheckedState.filter((p) => p).length;
          setIndeterminate(tote > 0 && tote < choicesLength);
          return tote;
        });
      };
      const onChangeAll = () => {
        setIndeterminate(false);
        if (total > 0 && total <= choicesLength) {
          setCheckedState(chooseNone);
          setTotal(0);
        } else {
          setCheckedState(chooseAll);
          setTotal(choicesLength);
        }
      };
      return (
        <Checkbox.Group>
          <Checkbox
            onChange={onChangeAll}
            checked={indeterminate ? "indeterminate" : total === choicesLength}
            label="Filter by letter"
          />
          <Checkbox.Group className="pl-4">
            {choices.map((letter, index) => {
              return (
                <Checkbox
                  name="alphabet"
                  key={letter}
                  label={letter}
                  checked={checkedState[index]}
                  onChange={() => onChange(index)}
                />
              );
            })}
          </Checkbox.Group>
        </Checkbox.Group>
      );
    }}
  </Story>
</Canvas>

### States

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

### Blue

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

### Group Vertical

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

### Group Horizontal

<Canvas 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>
</Canvas>