import React                                  from 'react';
import { boolean, number, radios, withKnobs } from '@storybook/addon-knobs';
import { iconColors }                         from '../../util/global-props';
import { OptionsKnobRecord }                  from '../../util/knobs';
import { Icon,  IconPropsType }               from './icon.component';
import { iconLibrary }                        from './icon.library';

// const names: IconPropsType['name'][] = Object.keys(iconMap) as IconPropsType['name'][];

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

const iconFrames: OptionsKnobRecord<IconPropsType['frame']> = {
    default: undefined,
    solid:   'solid',
    opacity: 'opacity',
    none:    'none'
};

// const iconColors: OptionsKnobRecord<IconPropsType['color']> = {
//     default: undefined,
//     none:    'none',
//     dark:    'dark',
//     grey:    'grey',
//     white:   'white',
//     key:     'key',
//     green:   'green',
//     red:     'red'
// };

export const IconMap = () => {
    const { frame, color, size } = Icon.defaultProps || {};

    const iconItem = (name: IconPropsType['name'], key: number) => (
        <div
            key={ key }
            style={ {
                display:       'flex',
                flexDirection: 'row',
                flex:          '1 1 200px',
                marginBottom:  40,
                alignItems:    'center',
                maxWidth:      '200px'
            } }
        >
            <Icon
                name={ name }
                size={ number('Size', size as NonNullable<IconPropsType['size']>, { range: true, min: 16, max: 56, step: 8 }) }
                frame={ radios('Frame', iconFrames, frame) }
                color={ radios('Color', iconColors, color) }
                solid={ boolean('Solid', false) }
            />
            <div style={ { marginLeft: 16 } }>{ name }</div>
        </div>
    );


    return (
        <div style={ {
            margin:        48,
            display:       'flex',
            flexDirection: 'row',
            flexWrap:      'wrap',
            width:         '100%'
        } }
        >
            { Object.keys(iconLibrary).map((item) => (
                <>
                    <h3>{ item }</h3>
                    { Object.keys(iconLibrary[ item as keyof typeof iconLibrary ]).map((name, key) => iconItem(name as IconPropsType['name'], key)) }
                </>
            )) }
        </div>
    );
};