import React, { FC, useState }              from 'react';
import { boolean, radios, text, withKnobs } from '@storybook/addon-knobs';
import { Wrapper }                          from '../../..';
import { Switch, SwitchPropsType }          from './switch.component';

export default {
    title:      'GEENEE-UI/Form',
    component:  Switch,
    decorators: [ withKnobs ]
};

const switchSize: Record<any, SwitchPropsType['size']> = {
    'md - default': 'md',
    lg:             'lg'
};

type SwitchCheckedProps = {
    defaultChecked?: boolean;
    label?: SwitchPropsType['label'];
    size?: SwitchPropsType['size'];
}

const SwitchChecked: FC<SwitchCheckedProps> = (props) => {
    const [ checked, setChecked ] = useState(props.defaultChecked);
    const handleClick = (value: boolean) => {
        setChecked(value);
    };
    return (
        <>
            <Switch
                size={ props.size }
                label={ props.label }
                checked={ checked }
                onChange={ handleClick }
                disabled={ boolean('IsDisabled', false) }
            />
        </>
    );
};
SwitchChecked.defaultProps = { defaultChecked: false };

export const _Switch = () => {
    const { size } = Switch.defaultProps || {};
    return (
        <Wrapper>
            <SwitchChecked
                defaultChecked={ boolean('IsDefaultChecked', false) }
                size={ radios('Size', switchSize, size) }
                label={ text('Title', 'Some title') }
            />
        </Wrapper>
    );
};

// export const States = () => (
//     <div className="story-wrapper">
//         <div className="story-element">
//             <h2>Small</h2>
//             <SwitchChecked size="small" />
//         </div>
//         <div className="story-element">
//             <h2>Default</h2>
//             <SwitchChecked />
//         </div>
//         <div className="story-element">
//             <h2>WithTitle</h2>
//             <SwitchChecked title={ text('Title', 'Some title') } />
//         </div>
//         <div className="story-element">
//             <h2>Default checked</h2>
//             <SwitchChecked defaultChecked />
//         </div>
//     </div>
// );