import Layout from '../../components/Layout'
import { ComponentsSidebar } from '../../sidebars'
import { Playground } from '../../components/Playground';
import { Code, Heading, Paragraph } from '@knkui/typography';

export default function Checkbox() {
    return (
        <Layout
            title="Radio"
            showHero
            description="Radio buttons allow the user to select one option from a set."
            sidebar={ComponentsSidebar}
        >
            <Paragraph>
                If you have multiple options appearing in a list, you can preserve space by using checkboxes instead of on/off switches.
                If you have a single option, avoid using a checkbox and use an on/off switch instead.
            </Paragraph>
            <Heading size={800}>Standalone radio buttons</Heading>
            <Paragraph>
                <Code>Radio</Code> can also be used standalone, without a <Code>RadioGroup</Code>.
            </Paragraph>
            <Playground
                isOpenByDefault={false}
                codeText={
                    `
<Paper>
    <Radio label="Default Radio Button" />
    <Radio label="Checked Default Radio Button" checked />
    <Radio label="Invalid Default Radio Button" invalid />
    <Radio label="Disabled Default Radio Button" disabled />
</Paper>
`
                }
            />

            <Heading size={800}>RadioGroup</Heading>
            <Paragraph>
                <Code>RadioGroup</Code> is a helpful wrapper used to group Radio components that provides an easier API, and proper keyboard accessibility to the group.
            </Paragraph>
            <Playground
                isOpenByDefault={false}
                codeText={
`
function RadioGroupDemo() {
    const [ value, setValue ] = React.useState('option-2')

    return (
        <Paper>
            <RadioGroup
                options={[
                    {
                        'label': 'Option 1',
                        'value': 'option-1',
                        'name': 'option-1',
                    },
                    {
                        'label': 'Option 2',
                        'value': 'option-2',
                        'name': 'option-2',
                    },
                    {
                        'label': 'Option 3',
                        'value': 'option-3',
                        'name': 'option-3',
                    },
                    {
                        'label': 'Disabled Option',
                        'value': 'option-4',
                        'name': 'option-4',
                        'disabled': true,
                    }
                ]}
                value={value}
                onChange={e => setValue(e.target.value)}
            >
            </RadioGroup>
            <Paper
                style={{
                    borderStyle: 'dashed',
                    borderWidth: 1,
                    borderColor: '#ccc',
                    padding: '0.5em',
                    color: '#ccc',
                    margin: '1em 0',
                }}
            >
                currently selected value: {value}
            </Paper>
        </Paper>
    )
}
`
                }
            />
        </Layout>
    )
}