import { ArgsTable, Canvas, Meta, Story } from '@storybook/addon-docs';
import { colorGuide, colorPalette, fontVariant } from '../../primitives';
import { Checkbox, Typography, Row, VerticalSpacer, HorizontalSpacer } from '..';

<Meta
    title="Components/Checkbox"
    component={Checkbox}
    argTypes={{
        colorConfig: {
            background: {
                control: { type: 'color' },
            },
            border: {
                control: { type: 'color' },
            },
            leftPlunk: {
                control: { type: 'color' },
            },
            topPlunk: {
                control: { type: 'color' },
            },
        },
    }}
/>

# Checkbox

Checkbox component is used when the users wants to select one or more items from a set of options.

## Usage

#### 1. Single Checkbox with label

export const SingleCheckbox = (args) => {
    const [isChecked, setIsChecked] = React.useState(false);
    const handleChange = (event) => {
        setIsChecked(event.target.checked);
    };
    return (
        <Checkbox {...args} isChecked={isChecked} onChange={handleChange}>
            <Typography {...fontVariant.BodyRegular16} color={colorPalette.popBlack[100]}>
                I agree to terms & conditions
            </Typography>
        </Checkbox>
    );
};

<Canvas>
    <Story
        name="Single Checkbox with label"
        args={{ colorConfig: colorGuide.lightComponents.checkbox }}
    >
        {SingleCheckbox.bind()}
    </Story>
</Canvas>

```jsx
import * as React from 'react';
import { Row, Checkbox, VerticalSpacer, Typography } from 'neopop-react-native/components';
import { colorGuide, colorPalette, fontVariant } from 'neopop-react-native/primitives';

export const SingleCheckbox = () => {
    const [isChecked, setIsChecked] = React.useState(false);
    const handleChange = (event) => {
        setIsChecked(event.target.checked);
    };

    return (
        <Checkbox
            isChecked={isChecked}
            colorConfig={colorGuide.lightComponents.checkbox}
            onChange={handleChange}
        >
            <Typography {...fontVariant.BodyRegular16} color={colorPalette.popBlack[100]}>
                I agree to terms & conditions
            </Typography>
        </Checkbox>
    );
};

export default SingleCheckbox;
```

#### 2. Multiple Checkboxes with label

export const MultipleCheckboxes = (args) => {
    const [options, setOptions] = React.useState([
        {
            name: 'CRED mint',
            isChecked: false,
        },
        {
            name: 'Store',
            isChecked: false,
        },
        {
            name: 'Utility Bills',
            isChecked: false,
        },
    ]);
    const handleChange = (event, index) => {
        const tempOptions = [...options];
        tempOptions[index].isChecked = !tempOptions[index].isChecked;
        setOptions(tempOptions);
    };
    return (
        <form>
            {options.map((option, index) => (
                <React.Fragment key={option.name}>
                    <Checkbox
                        {...args}
                        name={option.name}
                        isChecked={option?.isChecked || false}
                        onChange={(event) => handleChange(event, index)}
                    >
                        <Typography
                            {...fontVariant.BodyRegular16}
                            color={colorPalette.popBlack[100]}
                        >
                            {option.name}
                        </Typography>
                    </Checkbox>
                    <HorizontalSpacer n={4} />
                </React.Fragment>
            ))}
        </form>
    );
};

<Canvas>
    <Story
        name="Multiple Checkbox with label"
        args={{ colorConfig: colorGuide.lightComponents.checkbox }}
    >
        {MultipleCheckboxes.bind({})}
    </Story>
</Canvas>

```jsx
import * as React from 'react';
import {
    Row,
    Checkbox,
    VerticalSpacer,
    HorizontalSpacer,
    Typography,
} from 'neopop-react-native/components';
import { colorGuide, colorPalette, fontVariant } from 'neopop-react-native/primitives';

const MultipleCheckboxes = () => {
    const [options, setOptions] = React.useState([
        {
            name: 'CRED mint',
            isChecked: false,
        },
        {
            name: 'Store',
            isChecked: false,
        },
        {
            name: 'Utility Bills',
            isChecked: false,
        },
    ]);

    const handleChange = (event, index) => {
        const tempOptions = [...options];
        tempOptions[index].isChecked = !tempOptions[index].isChecked;
        setOptions(tempOptions);
    };

    return (
        <form>
            {options.map((option, index) => (
                <React.Fragment key={option.name}>
                    <Checkbox
                        name={option.name}
                        isChecked={option?.isChecked || false}
                        colorConfig={colorGuide.lightComponents.checkbox}
                        onChange={(e) => handleChange(e, index)}
                    >
                        <Typography
                            {...fontVariant.BodyRegular16}
                            color={colorPalette.popBlack[100]}
                        >
                            {option.name}
                        </Typography>
                    </Checkbox>
                    <HorizontalSpacer n={4} />
                </React.Fragment>
            ))}
        </form>
    );
};

export default MultipleCheckboxes;
```

## Variants

There are two states of checkbox

#### Selected

export const Selected = (args) => (
    <Checkbox {...args}>
        <Typography {...fontVariant.BodyRegular16} color={colorPalette.popBlack[100]}>
            Selected
        </Typography>
    </Checkbox>
);

<Canvas>
    <Story
        name="Selected"
        args={{
            isChecked: true,
            colorConfig: colorGuide.lightComponents.checkbox,
            onChange: (event) => {
                console.log(event.target.checked);
            },
        }}
    >
        {Selected.bind({})}
    </Story>
</Canvas>

#### Unselected

export const Unselected = (args) => (
    <Checkbox {...args}>
        <Typography {...fontVariant.BodyRegular16} color={colorPalette.popBlack[100]}>
            Unselected
        </Typography>
    </Checkbox>
);

<Canvas>
    <Story
        name="Unselected"
        args={{
            isChecked: false,
            colorConfig: colorGuide.lightComponents.checkbox,
            onChange: (event) => {
                console.log(event.target.checked);
            },
        }}
    >
        {Unselected.bind({})}
    </Story>
</Canvas>

## Props

<ArgsTable of={Checkbox} />

**colorConfig**

colorConfig prop object support four color configurations namely: `background`, `border`, `leftPlunk`, & `topPlunk`.

<div style={{ overflowX: 'auto' }}>

| property      | description               | type     |
| ------------- | ------------------------- | -------- |
| `background*` | checkbox background color | `string` |
| `border*`     | checkbox border color     | `string` |
| `leftPlunk*`  | left-plunk color          | `string` |
| `topPlunk*`   | top-plunk color           | `string` |

</div>