// node modules
import React, { useState }  from "react";
import { Meta, Story } from "@storybook/react";

// local components
import { PrimaryButton } from "../components/buttons/primary_button";
import { ModalWindow } from "../components/modal_window";
import { SelectButton } from "../components/buttons/select_button";

export default {
    title: 'Example/Modal',
} as Meta;

const ModalWindowTpl: Story = (args) => {
    const [open, toggleModal] = useState(false);
    const handleOpen = () => toggleModal(true);
    const handleClose = () => {
        toggleModal(false);
    }

    return (
        <div>
            <PrimaryButton onClick={handleOpen} label="Open Modal"/>
            <ModalWindow open={open} {...args}>
                <SelectButton onClick={handleClose} label="Close Modal"/>
            </ModalWindow>
        </div>
    )
}

export const modal_window = ModalWindowTpl.bind({});
