import React, { FC } from 'react';
import { Story }     from '@storybook/react';
import {
    Button,  Checkbox,
    Divider, Input, Wrapper
} from '../../..';
import { Dropdown, DropdownPropsType } from './dropdown.component';

export default {
    title:     'GEENEE-UI/Dropdown',
    component: Dropdown
};

type StoryArgsType = {
  [key: string]: any;
} & DropdownPropsType

const PlaygroundTemplate: FC<StoryArgsType> = (props: StoryArgsType) => {
    const [ activeItem, setActiveItem ] = React.useState<string | null>(null);

    const handleChange = (_event: React.SyntheticEvent, menuItemId: string | null) => {
        setActiveItem(menuItemId);
    };
    const items        = [ 1, 2, 3, 4, 5 ].map((num) => (
        <Button
            fullWidth
            viewType="transparent-grey"
            key={ num }
            size="md"
            align="left"
            squareBorderRadius
        >
            Test
            { num }
        </Button>
    ));

    return (
        <div className="story-wrapper">
            <div className="story-element">
                <Wrapper row>

                    <Dropdown
                        items={ items }
                        onSelect={ handleChange }
                        closeOnSelect
                        menuWidth="100%"
                        margin="md"
                    >
                        <Button style={ { width: '200px' } }>
                            { activeItem ? `Selected ${ activeItem }` : 'Select Something!' }
                        </Button>
                    </Dropdown>

                    <Dropdown
                        menu={ (
                            <Wrapper padding="xs">
                                <Input placeholder="smthng" margin="sm" size="md" />
                                <Checkbox flex={ 1 } label="switch 1" margin="sm" />
                                <Checkbox flex={ 1 } label="switch 2" margin="sm" />
                                <Divider margin="sm" />
                                <Button fullWidth viewType="transparent-black" size="md">Action</Button>
                            </Wrapper>
                        ) }
                        // controlled
                        menuWidth="100%"
                    >
                        <Button fullWidth>
                            Its not controlled drop
                        </Button>

                    </Dropdown>

                    <Dropdown
                        items={ items }
                        onSelect={ handleChange }
                        closeOnSelect
                        menuWidth="100%"
                    >
                        { (dropdownOpen) => (
                            <Button
                                icon={ dropdownOpen ? 'arrowTop' : 'arrowDown' }
                                iconAfter
                                iconFloat="right"
                                squareBorderRadius
                                iconMargin="off"
                                fullWidth
                                style={ { width: '200px' } }
                            >
                                <span>
                                    { activeItem ? `Selected ${ activeItem }` : 'Select Something!' }
                                </span>
                            </Button>
                        ) }

                    </Dropdown>
                </Wrapper>

            </div>
        </div>
    );
};
// eslint-disable-next-line react/function-component-definition
export const Playground: Story<StoryArgsType> = (props: StoryArgsType) => (
    <PlaygroundTemplate { ...props } />
);

Playground.args = {};

Playground.bind({});