import React, { useState }                 from 'react';
import { boolean, optionsKnob, withKnobs } from '@storybook/addon-knobs';
import { Wrapper }                         from '../../..';
import { OptionsKnobRecord }               from '../../util/knobs';
import { SelectList, SelectListPropsType } from './select-list.component';

export default {
    title:      'GEENEE-UI/Select-list',
    component:  SelectList,
    decorators: [ withKnobs ]
};

const viewType: OptionsKnobRecord<SelectListPropsType['viewType']> = {
    default:     undefined,
    check:       'check',
    radio:       'radio',
    button:      'button',
    transparent: 'transparent',
    block:       'block'

};

export const Playground = () => {
    const [ mono, setMono ] = useState('left');
    const [ multi, setMulti ] = useState([ '' ]);
    const [ type, setType ] = useState('mono');
    const onChange = (value: string | undefined, m: boolean) => {
        if (value) {
            if (m) {
                setType('multi');
                if (multi.includes(value)) {
                    setMulti([ ...multi.filter((o) => o !== value) ]);
                } else {
                    setMulti([ ...multi, value ]);
                }
            } else {
                setType('mono');
                setMono(value);
            }
        }
    };

    const itemList: SelectListPropsType['items'] = [
        {
            value: 'left',
            label: 'Left'
        },
        {
            value: 'center',
            label: 'Center'
        },
        {
            value: 'right',
            label: 'Right'
        },
        {
            value: 'custom',
            icon:  'dots',
            flex:  '0'
        }
    ];
    return (
        <Wrapper maxWidth="500px" frame="solid-shadow-xl" padding="xxl">
            <SelectList
                viewType={ optionsKnob('01. View Type', viewType, undefined, { display: 'select' }) }
                onChange={ boolean('Multi select', false) ? (value) => onChange(value, true) : (value) => onChange(value || '', false) }
                items={ itemList }
                value={ type === 'mono' ? mono : multi }
            />
        </Wrapper>
    );
};