import React               from 'react';
import { TransitionGroup } from 'react-transition-group';
import { withKnobs }       from '@storybook/addon-knobs';
import {
    Button, FormItem, Input, Modal, ModalProvider, Title, useModal, Wrapper
} from '../../..';

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

const useStoryModal = () => {
    const [ showModal, hideModal ] = useModal((transformGroupProps: JSX.IntrinsicAttributes) => (
        <Modal
            onHideModal={ () => hideModal() }
            { ...transformGroupProps }
        >
            <Wrapper
                padding="xxl"
                styles={ { minWidth: 300 } }
            >
                <Title size="xl" margin="xl" align="center">Login</Title>
                <FormItem label="Email">
                    <Input />
                </FormItem>
                <FormItem label="Password" margin="xl">
                    <Input type="password" />
                </FormItem>
                <Button fullWidth>Login</Button>
            </Wrapper>
        </Modal>
    ));

    return [ showModal, hideModal ];
};

const ModalStory = () => {
    const [ showModal ] = useStoryModal();

    return (
        <div className="story-element">
            <Button onClick={ () => showModal() }>Click to open modal</Button>
        </div>
    );
};

export const Playground = () => (
    <>
        { /* @ts-ignore */ }
        <ModalProvider rootComponent={ TransitionGroup }>
            <ModalStory />
        </ModalProvider>
    </>
);