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

export const meta = {
  title: 'Toggle',
  description: 'Toggle',
}

## Toggle

Displays a boolean value.

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

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

<Playground
  title="size"
  scope={{ Toggle, Spacer }}
  code={`
<>
  <Toggle size="small" />
  <Spacer y={.5} />
  <Toggle initialChecked size="medium" />
  <Spacer y={.5} />
  <Toggle initialChecked size="large" />
</>
`} />

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


<Attributes edit="/pages/docs/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` | - | - |
| **size** | input size | `NormalSizes` | `'mini', 'small', 'medium', 'large'` | `medium` |
| **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>

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