import { useState } from 'react';
import { Meta, Story, Canvas, ArgsTable } from '@storybook/addon-docs';
import { Toggle } from './Toggle';
import { Box } from '../Box/Box';

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

# Toggle

A `Toggle` switch is like a digital on/off switch. They prompt users to choose between two mutually exclusive options and always have a default value.
Toggles should provide immediate results and should not require the user to Save or Submit to apply the new state.

<Canvas isExpanded>
  <Toggle id="example" label="toggle label" isChecked onChange={() => {}} />
</Canvas>

## Props

<ArgsTable of={Toggle} />

### Basic Example

<Canvas isExpanded>
  <Story
    name="Default"
    parameters={{
      design: {
        type: 'figma',
        url: 'https://www.figma.com/file/k1kOsplTGXvSSMQQCzhCND/Palmetto-Design-System?node-id=488%3A3785',
      },
    }}
  >
    {() => {
      const [value, setValue] = useState(null);
      return (
        <Toggle
          id="defaultStateIsUnchecked"
          label="toggle label"
          onChange={event => setValue(event.target.checked)}
          isChecked={value}
        />
      );
    }}
  </Story>
</Canvas>

### Help Text

Use the `helpText` prop to add clarifying text beneath the toggle label.

<Canvas isExpanded>
  <Story
    name="With Help Text"
    parameters={{
      design: {
        type: 'figma',
        url: 'https://www.figma.com/file/k1kOsplTGXvSSMQQCzhCND/Palmetto-Design-System?node-id=488%3A3785',
      },
    }}
  >
    {() => {
      const [value, setValue] = useState(null);
      return (
        <Toggle
          id="helpText"
          label="toggle label"
          helpText="descriptive help text"
          onChange={event => setValue(event.target.checked)}
          isChecked={value}
        />
      );
    }}
  </Story>
</Canvas>

### Hidden Label

Use the `hideLabel` prop to not render the label, however a `label` is still required for accessability purposes.

<Canvas>
  <Story
    name="Hidden Label"
    parameters={{
      design: {
        type: 'figma',
        url: 'https://www.figma.com/file/k1kOsplTGXvSSMQQCzhCND/Palmetto-Design-System?node-id=488%3A3785',
      },
    }}
  >
    {() => {
      const [value, setValue] = useState(null);
      return (
        <Toggle
          id="hiddenLabelToggle"
          label="Hidden Label"
          helpText="hidden help text too"
          hideLabel
          onChange={event => setValue(event.target.checked)}
          isChecked={value}
        />
      );
    }}
  </Story>
</Canvas>

### Sizes

Set the size of the `toggle` to `sm`, `md` or `lg`. `md` is the default size.
The `size` prop is also a `ResponsiveProp`, so it can be sized differently at each [breakpoint](?path=/docs/design-tokens-design-tokens--page#breakpoints) by passing an object.

<Canvas isExpanded>
  <Story
    name="Size"
    parameters={{
      design: {
        type: 'figma',
        url: 'https://www.figma.com/file/k1kOsplTGXvSSMQQCzhCND/Palmetto-Design-System?node-id=488%3A3785',
      },
    }}
  >
    {() => {
      const [value, setValue] = useState(true);
      return (
        <Box gap="md">
          <Toggle
            id="smToggle"
            label="small toggle"
            onChange={event => setValue(event.target.checked)}
            isChecked={value}
            size="sm"
          />
          <Toggle
            id="mediumToggle"
            label="medium toggle"
            onChange={event => setValue(event.target.checked)}
            isChecked={value}
            size="md"
          />
          <Toggle
            id="largeToggle"
            label="large toggle"
            onChange={event => setValue(event.target.checked)}
            isChecked={value}
            size="lg"
          />
          <Toggle
            id="responsiveToggle"
            label="responsive toggle"
            onChange={event => setValue(event.target.checked)}
            isChecked={value}
            size={{ base: 'sm', tablet: 'md', desktop: 'lg', hd: 'sm' }}
          />
        </Box>
      );
    }}
  </Story>
</Canvas>

### Disabled

Disable the toggle by setting the `isDisabled` prop.

<Canvas>
  <Story
    name="Disabled"
    parameters={{
      design: {
        type: 'figma',
        url: 'https://www.figma.com/file/k1kOsplTGXvSSMQQCzhCND/Palmetto-Design-System?node-id=488%3A3785',
      },
    }}
  >
    {() => {
      const [value, setValue] = useState(null);
      return (
        <Toggle
          id="disabledToggle"
          label="Label"
          onChange={event => setValue(event.target.checked)}
          isChecked={value}
          isDisabled
        />
      );
    }}
  </Story>
</Canvas>

## Error

Use the `error` prop to mark the input as invalid. `error` accepts a `boolean`, `string`, or `node`. If either a `string` or `node` is passed, a validation message is displayed below it.

<Canvas>
  <Story
    name="Error"
    parameters={{
      design: {
        type: 'figma',
        url: 'https://www.figma.com/file/k1kOsplTGXvSSMQQCzhCND/Palmetto-Design-System?node-id=488%3A3785',
      },
    }}
  >
    {() => {
      const [value, setValue] = useState(null);
      const [value2, setValue2] = useState(true);
      return (
        <Box gap="md">
          <Toggle
            id="invalidToggle"
            label="Agree to Terms and Conditions"
            isChecked={value}
            onChange={value => setValue(event.target.checked)}
            isRequired
            error="You must accept the Terms and Conditions"
          />
          <Toggle
            id="invalidToggle2"
            label="Roof Replacement"
            isChecked={value2}
            onChange={value2 => setValue2(event.target.checked)}
            error="Site Improvements can not be present with PPA"
          />
        </Box>
      );
    }}
  </Story>
</Canvas>
