import { Layout, Playground, Attributes } from 'lib/components'
import { Radio, Spacer, Code, Text } from 'components'
import { useState } from 'react'

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

## Radio

Provides single user input from a selection of options.

<Playground
  scope={{ Radio }}
  code={`
<Radio checked={false}>Option 1</Radio>
`}
/>

<Playground
  title="Group"
  desc="A group of radio components."
  scope={{ Radio, useState }}
  code={`
() => {
  const [state, setState] = useState('1')
  const handler = val => {
    setState(val)
    console.log(val)
  }
  return (
    <>
      <Radio.Group value={state} onChange={handler}>
        <Radio value="1">Option 1</Radio>
        <Radio value="2">Option 2</Radio>
      </Radio.Group>
    </>
  )
}
`}
/>

<Playground
  title="Sizes"
  desc="Radio of different sizes."
  scope={{ Radio, Spacer, Text }}
  code={`
<>
  <Text span size="12px" type="secondary">SINGLE</Text>
  <div style={{ paddingLeft: '.25rem', marginTop: '.25rem' }}>
    <Radio checked={false} size="mini">mini</Radio>
    <Radio checked={false} size="small">small</Radio>
    <Radio checked={false} size="medium">medium</Radio>
    <Radio checked={false} size="large">large</Radio>
  </div>
  <Spacer y={.5} />
  <Text span size="12px" type="secondary">GROUP</Text>
  <div style={{ paddingLeft: '.25rem', marginTop: '.25rem' }}>
    <Radio.Group size="mini">
      <Radio value="1">Option 1</Radio>
      <Radio value="2">Option 2</Radio>
      <Radio value="3">Option 3</Radio>
    </Radio.Group>
  </div>
</>
`}
/>

<Playground
  title="Description"
  desc="`Description` can be combined with other components."
  scope={{ Radio, Code }}
  code={`
<Radio.Group value="1" onChange={val => console.log(val)}>
  <Radio value="1">
    Option 1
    <Radio.Description>Description for Option1</Radio.Description>
  </Radio>
  <Radio value="2">
    Option 2
    <Radio.Desc><Code>Description</Code> for Option2</Radio.Desc>
  </Radio>
</Radio.Group>
`}
/>

<Playground
  title="Disabled"
  desc="Disable all radios."
  scope={{ Radio, useState, Code }}
  code={`
<Radio.Group value="1" disabled>
  <Radio value="1">Option 1</Radio>
  <Radio value="2">Option 2</Radio>
</Radio.Group>
`}
/>

<Playground
  title="Row"
  desc="Horizontal arrangement."
  scope={{ Radio, Code }}
  code={`
<Radio.Group value="1" useRow>
  <Radio value="1">
    Option 1
    <Radio.Desc>Description for Option1</Radio.Desc>
  </Radio>
  <Radio value="2">
    Option 2
    <Radio.Desc>Description for Option2</Radio.Desc>
  </Radio>
</Radio.Group>
`}
/>

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

| Attribute    | Description                   | Type                      | Accepted values             | Default  |
| ------------ | ----------------------------- | ------------------------- | --------------------------- | -------- |
| **checked**  | selected or not (in single)   | `boolean`                 | -                           | `false`  |
| **value**    | unique ident value (in group) | `string`                  | -                           | -        |
| **id**       | native attr                   | `string`                  | -                           | -        |
| **disabled** | disable current radio         | `boolean`                 | -                           | `false`  |
| **size**     | radio size                    | `NormalSizes`             | [NormalSizes](#normalsizes) | `medium` |
| **onChange** | change event                  | `(e: RadioEvent) => void` | -                           | -        |
| ...          | native props                  | `InputHTMLAttributes`     | `'id', 'className', ...`    | -        |

<Attributes.Title>Radio.Group.Props</Attributes.Title>

| Attribute        | Description                     | Type                      | Accepted values             | Default  |
| ---------------- | ------------------------------- | ------------------------- | --------------------------- | -------- |
| **initialValue** | initial value                   | `string`                  | -                           | -        |
| **value**        | selected child radio            | `string`                  | -                           | -        |
| **useRow**       | horizontal layout               | `boolean`                 | -                           | `false`  |
| **disabled**     | disable all radios              | `boolean`                 | -                           | `false`  |
| **size**         | size of all radios in the group | `NormalSizes`             | [NormalSizes](#normalsizes) | `medium` |
| **onChange**     | change event                    | `(value: string) => void` | -                           | -        |
| ...              | native props                    | `HTMLAttributes`          | `'id', 'className', ...`    | -        |

<Attributes.Title alias="Radio.Desc">Radio.Description.Props</Attributes.Title>

| Attribute | Description  | Type             | Accepted values          | Default |
| --------- | ------------ | ---------------- | ------------------------ | ------- |
| ...       | native props | `HTMLAttributes` | `'id', 'className', ...` | -       |

<Attributes.Title>NormalSizes</Attributes.Title>

```ts
type NormalSizes = 'mini' | 'small' | 'medium' | 'large'
```

</Attributes>

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