import * as React from 'react';
import {Button, Modal, SIZE} from './../../index';

import {withInfo} from '@storybook/addon-info';
import {storyLayout} from '../../index.stories';
import {ModalAnimation} from './Modal.types';
import {select, withKnobs} from '@storybook/addon-knobs';

// eslint-disable-next-line no-restricted-syntax
export default {
    title: 'Modal',
    decorators: [withInfo, storyLayout, withKnobs]
};

interface IState {
    isOpen: boolean;
}

class SimpleModal extends React.Component<any, IState> {
    override state: IState = {
        isOpen: false
    };

    toggleModal = () => {
        this.setState((prevState) => {
            return {
                isOpen: !prevState.isOpen
            };
        });
    };

    override render () {
        return (
            <>
                <Button onClick={this.toggleModal}>Open modal</Button>

                <Modal
                    isOpen={this.state.isOpen}
                    onClose={this.toggleModal}
                    header={'HEADER'}
                    footer={'FOOTER'}
                    size={SIZE.MIDDLE}
                    shouldCloseOnClickOutside={false}
                    animation={select('Animation', {
                        none: ModalAnimation.None,
                        'default': ModalAnimation.Fade,
                        FlipTop: ModalAnimation.FlipTop,
                        Slit: ModalAnimation.Slit
                    }, ModalAnimation.Fade)}
                >
                    Body of Modal
                </Modal>
            </>
        );
    }
}

export const simpleModal = () => {
    return (
        <SimpleModal/>
    );
};