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="Checkbox"
            showHero
            description="Checkboxes allow the user to select one or more items 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}>Basic checkboxes</Heading>
            <Playground
                isOpenByDefault={false}
                codeText={
`
<Paper>
    <Checkbox label="Checkbox default" />
    <Checkbox label="Checkbox checked" checked />
    <Checkbox label="Checkbox invalid" invalid />
    <Checkbox label="Checkbox invalid checked" invalid checked />
    <Checkbox label="Checkbox disabled" disabled />
    <Checkbox label="Checkbox disabled checked" disabled checked />
    <Checkbox label="Checkbox indeterminate" indeterminate />
    <Checkbox label="Checkbox indeterminate checked" indeterminate checked />
    <Checkbox label="Checkbox indeterminate checked invalid" indeterminate checked invalid />
    <Checkbox label="Checkbox indeterminate disabled" indeterminate disabled />
    <Checkbox label="Checkbox indeterminate disabled checked" indeterminate disabled checked />
</Paper>
`
                }
            />

            <Heading size={800}>Indeterminate</Heading>
            <Paragraph>
                Set <Code>indeterminate</Code> to show partially checked states. The parent checkbox will be indeterminate until all its child sub-options are checked.
            </Paragraph>
            <Playground
                isOpenByDefault={false}
                codeText={
`
function inderterminateDemoCheckBox() {
    const PARENT_ID = 'PARENT';
    const CHILD_1_ID = 'CHILD1';
    const CHILD_2_ID = 'CHILD2';

    const getCheckedChildrenCount = (checkedItems) => {
        const childItems = Object.keys(checkedItems).filter(i => i !== PARENT_ID);
        return childItems.reduce(
            (count, i) => (checkedItems[i] ? count + 1 : count),
            0,
        );
    };

    const getIsParentIndeterminate = (checkedItems) => {
        const checkedChildrenCount = getCheckedChildrenCount(checkedItems);
        return checkedChildrenCount > 0 && checkedChildrenCount < 2;
    };

    const initialCheckedItems = {
        [PARENT_ID]: false,
        [CHILD_1_ID]: false,
        [CHILD_2_ID]: false,
    };
    const [checkedItems, setCheckedItems] = React.useState(initialCheckedItems);

    const onChange = (event) => {
        const itemValue = event.target.value;

        if (itemValue === PARENT_ID) {
        const newCheckedState = !checkedItems[PARENT_ID];
        // Set all items to the checked state of the parent
        setCheckedItems(
            Object.keys(checkedItems).reduce(
            (items, i) => ({ ...items, [i]: newCheckedState }),
            {},
            ),
        );
        } else {
        const newCheckedItems = {
            ...checkedItems,
            [itemValue]: !checkedItems[itemValue],
        };

        setCheckedItems({
            // If all children would be unchecked, also uncheck the parent
            ...newCheckedItems,
            [PARENT_ID]: getCheckedChildrenCount(newCheckedItems) > 0,
        });
        }
    };

    return (
        <div>
            <Checkbox
                checked={checkedItems[PARENT_ID]}
                indeterminate={getIsParentIndeterminate(checkedItems)}
                onChange={onChange}
                label="Parent checkbox"
                value={PARENT_ID}
                name="parent"
            />
            <Paper
                style={{
                    display: 'flex',
                    flexDirection: 'column',
                    paddingLeft: '24px',
                }}
            >
                <Checkbox
                    checked={checkedItems[CHILD_1_ID]}
                    onChange={onChange}
                    label="Child checkbox 1"
                    value={CHILD_1_ID}
                    name="child-1"
                />
                <Checkbox
                    checked={checkedItems[CHILD_2_ID]}
                    onChange={onChange}
                    label="Child checkbox 2"
                    value={CHILD_2_ID}
                    name="child-1"
                />
            </Paper>
        </div>
    )
}
`
                }
            />
            <Heading size={800}>Uncontrolled</Heading>
            <Paragraph>
                In an uncontrolled checkbox, the checked state is managed by the DOM. Use <Code>defaultChecked</Code> to set the initial selected state.
            </Paragraph>
            <Playground
                isOpenByDefault={false}
                codeText={
`
<Checkbox
    defaultChecked
    label="Uncontrolled checkbox"
    value="Uncontrolled checkbox"
    name="uncontrolled-checkbox"
/>
`
                }
            />
            <Heading size={800}>Size</Heading>
            <Paragraph>
                Set <Code>size</Code> to change the size of the checkbox.
            </Paragraph>
            <Playground
                isOpenByDefault={false}
                codeText={
`
<Paper
    style={{
        display: 'flex',
        flexDirection: 'column',
        paddingLeft: '24px',
    }}
>
    <Checkbox
        value="Small checkbox"
        label="Small checkbox"
        name="checkbox-basic"
        size="sm"
        disabled
    />
    <Checkbox
        value="Medium checkbox"
        label="Medium checkbox"
        name="checkbox-basic"
        size="md"
        invalid
    />
    <Checkbox
        value="Large checkbox"
        label="Large checkbox"
        name="checkbox-basic"
        size="lg"
        checked
    />
    <Checkbox
        value="Extra large checkbox"
        label="Extra large checkbox"
        name="checkbox-basic"
        size="xl"
    />
</Paper>
`
                }
            />
        </Layout>
    )
}