import {useState} from 'react';
import React, {ComponentStory, ComponentMeta} from '@storybook/react';
import {Switch} from '../src';

export default {
    title: 'Inputs/Switch',
    component: Switch,
    parameters: {
        layout: 'centered'
    }
} as ComponentMeta<typeof Switch>;

const Template: ComponentStory<typeof Switch> = (args) => {
    const [checked, setChecked] = useState<boolean>(!!args.checked)

    function changeHandler(v: boolean) {
        setChecked(v)
    }

    return <Switch
        onChange={changeHandler}
        checked={checked}
        preserveBackground={args.preserveBackground}
        readOnly={args.readOnly}
    />;
}

export const Default = Template.bind({});
Default.args = {
    checked: true,
    preserveBackground: false,
    readOnly: false
};

export const BackgroundPreserve = Template.bind({});
BackgroundPreserve.args = {
    checked: true,
    preserveBackground: true,
    readOnly: false
};

export const Readonly = Template.bind({});
Readonly.args = {
    checked: false,
    preserveBackground: false,
    readOnly: true
};