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

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

<ComponentHeading
  componentName="Toggle"
  description="A fancier checkbox"
  sourcePath="src/components/Toggle/Toggle.tsx"
  waiAriaPath="https://www.w3.org/TR/wai-aria-1.2/#switch"
/>

This is a controlled component that requires `checked` and `onChange` props to function. You can optionally
provide `children` as a label, and that label can be positioned on the left or right of the switch with the
`labelPosition` prop.

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

<Preview withSource={SourceState.OPEN}>
  <Story name="Toggle">
    {() => {
      const [checked, setChecked] = useState(false);
      return (
        <Toggle
          checked={checked}
          onChange={(newValue) => setChecked(newValue)}
        />
      );
    }}
  </Story>
</Preview>

## Props

<Props of={Toggle} />

<Accessibility
  description={
    <>
      Adheres to the{" "}
      <Link href="https://www.w3.org/TR/wai-aria-1.2/#switch" target="_blank">
        switch role requirements
      </Link>
      .
    </>
  }
  keyboardInteractions={[
    {
      key: "Space",
      description: "Toggles the component’s state.",
    },
    {
      key: "Enter",
      description: "Toggles the component’s state.",
    },
  ]}
/>

## Demos

### With label

<Preview withSource={SourceState.OPEN}>
  <Story name="Toggle with label">
    {() => {
      const [checked, setChecked] = useState(false);
      return (
        <Toggle checked={checked} onChange={(newValue) => setChecked(newValue)}>
          {checked ? "On" : "Off"}
        </Toggle>
      );
    }}
  </Story>
</Preview>

### Label placement

<Preview withSource={SourceState.OPEN}>
  <Story name="Toggle label placement">
    {() => {
      const [checked1, setChecked1] = useState(false);
      const [checked2, setChecked2] = useState(false);
      return (
        <>
          <Box className="p-4">
            <Toggle
              checked={checked1}
              onChange={(newValue) => setChecked1(newValue)}
              labelPosition="right"
            >
              {checked1 ? "On" : "Off"}
            </Toggle>
          </Box>
          <Box className="p-4">
            <Toggle
              checked={checked2}
              onChange={(newValue) => setChecked2(newValue)}
              labelPosition="left"
            >
              {checked2 ? "On" : "Off"}
            </Toggle>
          </Box>
        </>
      );
    }}
  </Story>
</Preview>

### Disabled

<Preview withSource={SourceState.OPEN}>
  <Story name="Toggle disabled">
    <Box className="p-4">
      <Toggle
        disabled
        onChange={() => console.log("this will not get called")}
      />
    </Box>
    <Box className="p-4">
      <Toggle
        disabled
        checked
        onChange={() => console.log("this will not get called")}
      />
    </Box>
  </Story>
</Preview>