import { useState } from "react";
import { Story, Preview, Meta } from "@storybook/addon-docs/blocks";
import { THEME } from "../../types";
import { Checkbox } from "../../components/Checkbox";

export const decorators = [
  (storyFn) => (
    <div className="p-8" style={{ backgroundColor: "#132433" }}>
      {storyFn()}
    </div>
  ),
];

<Meta
  title="Components/Forms/Checkbox (Branded)"
  component={Checkbox}
  decorators={decorators}
/>

# Brand Checkbox

The [`Checkbox`](/?path=/docs/components-forms-checkbox--default) component is also available in a `brand` theme variant. Supported functionaliy for the brand theme `Checkbox` is shown below. If a `Checkbox` is within a brand themed [`FormGroup`](http://localhost:9002/?path=/docs/components-aptible-branding-formgroup--form-group), it will automatically use that as its `theme`. To override this, provide a value to the `Checkbox`'s `theme` prop.

<Preview>
  <Story name="Brand Checkbox - Default">
    <Checkbox theme={THEME.BRAND} label="Unchecked" />
    <Checkbox theme={THEME.BRAND} checked label="Checked" />
  </Story>
</Preview>

## Demos

### Interactive

<Preview>
  <Story name="Brand Checkbox - Interactive">
    {() => {
      const [checked, setChecked] = useState(false);
      const handleCheckboxClick = () => {
        setChecked(!checked);
      };
      return (
        <Checkbox
          theme={THEME.BRAND}
          label="Interactive"
          checked={checked}
          onChange={handleCheckboxClick}
        />
      );
    }}
  </Story>
</Preview>

### Disabled

<Preview>
  <Story name="Brand Checkbox - Disabled">
    <Checkbox theme={THEME.BRAND} label="Unchecked" />
    <Checkbox theme={THEME.BRAND} checked label="Checked" />
    <Checkbox theme={THEME.BRAND} label="Disabled" disabled />
    <Checkbox theme={THEME.BRAND} label="Checked + Disabled" checked disabled />
  </Story>
</Preview>