import { Layout, Playground, Attributes } from 'lib/components'
import { Toggle, Spacer } from 'components'

export const meta = {
  title: 'Toggle',
  group: 'Data Entry',
}

## Toggle

Displays a boolean value.

<Playground
  scope={{ Toggle, Spacer }}
  code={`
<>
  <Toggle />
  <Spacer h={.5} />
  <Toggle initialChecked />
</>
`}
/>

<Playground
  title="Type"
  desc="Differentiate states by color."
  scope={{ Toggle, Spacer }}
  code={`
<>
  <Toggle type="default" initialChecked />
  <Spacer h={.5} />
  <Toggle type="secondary" initialChecked />
  <Spacer h={.5} />
  <Toggle type="success" initialChecked />
  <Spacer h={.5} />
  <Toggle type="warning" initialChecked />
  <Spacer h={.5} />
  <Toggle type="error" initialChecked />
</>
`}
/>

<Playground
  title="disabled"
  scope={{ Toggle, Spacer }}
  code={`
<>
  <Toggle disabled />
  <Spacer h={.5} />
  <Toggle initialChecked disabled />
</>
`}
/>

<Playground
  title="get change"
  scope={{ Toggle, Spacer }}
  code={`
() => {
  const handler = event => {
    console.log(event.target.checked)
  }
  return <Toggle onChange={handler} />
}
`}
/>

<Attributes edit="/pages/en-us/components/toggle.mdx">
<Attributes.Title>Toggle.Props</Attributes.Title>

| Attribute          | Description               | Type                  | Accepted values                    | Default   |
| ------------------ | ------------------------- | --------------------- | ---------------------------------- | --------- |
| **checked**        | checked or not            | `boolean`             | -                                  | -         |
| **initialChecked** | checked or not on initial | `boolean`             | -                                  | `false`   |
| **onChange**       | change event handler      | `ToggleEvent`         | -                                  | -         |
| **type**           | current type              | `ToggleTypes`         | [ToggleTypes](#toggletypes)        | `default` |
| **disabled**       | disable toggle            | `boolean`             | -                                  | `false`   |
| ...                | native props              | `LabelHTMLAttributes` | `'from', 'name', 'className', ...` | -         |

<Attributes.Title>ToggleEvent</Attributes.Title>

```ts
interface ToggleEventTarget {
  checked: boolean
}

export interface ToggleEvent {
  target: ToggleEventTarget
  stopPropagation: () => void
  preventDefault: () => void
  nativeEvent: React.ChangeEvent
}
```

<Attributes.Title>ToggleTypes</Attributes.Title>

```ts
type ToggleTypes = 'default' | 'secondary' | 'success' | 'warning' | 'error'
```

</Attributes>

export default ({ children }) => <Layout meta={meta}>{children}</Layout>
