import { createElement, useState } from 'react';
import {
  ArgsTable,
  Canvas,
  Meta,
  Source,
  Story
} from '@storybook/addon-docs/blocks';
import Toggle from 'components/Toggle';
import CWBTheme, { ThemeProvider } from 'styles/CWBTheme';

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

# Toggle

Allows the user to input a binary value. Functions similarly to Checkboxes, but with a different UI.

<Canvas>
  <Story name="Toggle">
    {() => {
      const [checked, setChecked] = useState(false);
      return (
        <Toggle
          checked={checked}
          label={checked ? 'On' : 'Off'}
          onChange={(e) => setChecked(e.target.checked)}
        />
      );
    }}
  </Story>
</Canvas>

<Source code="import { Toggle } from 'cwb-react';" />

## Usage

Toggle labels can be positioned to the top, right, bottom or left of the Toggle itself. By default, the label is rendered to the right of the Toggle.

<ThemeProvider theme={CWBTheme}>
  <Canvas style={{ marginBottom: '0' }}>
    {createElement(() => {
      const [checked, setChecked] = useState({
        t1: false,
        t2: false,
        t3: false,
        t4: false
      });
      const handleChange = (e) => {
        setChecked((state) => ({
          ...state,
          [e.target.name]: e.target.checked
        }));
      };
      return (
        <div
          style={{
            width: '100%',
            display: 'flex',
            alignItems: 'center',
            justifyContent: 'space-between'
          }}
        >
          <Toggle
            checked={checked.t1}
            label="Label"
            labelPosition="top"
            name="t1"
            onChange={handleChange}
          />
          <Toggle
            checked={checked.t2}
            label="Label"
            name="t2"
            onChange={handleChange}
          />
          <Toggle
            checked={checked.t3}
            label="Label"
            labelPosition="bottom"
            name="t3"
            onChange={handleChange}
          />
          <Toggle
            checked={checked.t4}
            label="Label"
            labelPosition="left"
            name="t4"
            onChange={handleChange}
          />
        </div>
      );
    })}
  </Canvas>
  <div style={{ marginTop: '-20px' }}>
    <Source
      code={
        '{createElement(() => {\n' +
        '  const [checked, setChecked] = useState({\n' +
        '    t1: false,\n' +
        '    t2: false,\n' +
        '    t3: false,\n' +
        '    t4: false\n' +
        '  });\n\n' +
        '  const handleChange = (e) => {\n' +
        '    setChecked((state) => ({\n' +
        '      ...state,\n' +
        '      [e.target.name]: e.target.checked\n' +
        '    }));\n' +
        '  };\n\n' +
        '  return (\n' +
        '    <div\n' +
        '      style={{\n' +
        `        width: '100%',\n` +
        `        display: 'flex',\n` +
        `        alignItems: 'center',\n` +
        `        justifyContent: 'space-between'\n` +
        '      }}\n' +
        '    >\n' +
        '      <Toggle\n' +
        '        checked={checked.t1}\n' +
        '        label="Label"\n' +
        '        labelPosition="top"\n' +
        '        name="t1"\n' +
        '        onChange={handleChange}\n' +
        '      />\n' +
        '      <Toggle\n' +
        '        checked={checked.t2}\n' +
        '        label="Label"\n' +
        '        name="t2"\n' +
        '        onChange={handleChange}\n' +
        '      />\n' +
        '      <Toggle\n' +
        '        checked={checked.t3}\n' +
        '        label="Label"\n' +
        '        labelPosition="bottom"\n' +
        '        name="t3"\n' +
        '        onChange={handleChange}\n' +
        '      />\n' +
        '      <Toggle\n' +
        '        checked={checked.t4}\n' +
        '        label="Label"\n' +
        '        labelPosition="left"\n' +
        '        name="t4"\n' +
        '        onChange={handleChange}\n' +
        '      />\n' +
        '    </div>\n' +
        '  );\n' +
        '})}'
      }
    />
  </div>
</ThemeProvider>

## Props

<ArgsTable />