import React from "react";
import { Story, Meta } from "@storybook/react/types-6-0";

import { ThemeProvider } from "../ThemeProvider";
import Modal, { ModalProps } from "./Modal";
import Button from "../button/Button";

import { ModalHeader, ModalBody, ModalFooter, ModalButton } from "baseui/modal";

export default {
  title: "Components/Content/Modal",
  component: Modal,
} as Meta;

const Template: Story<ModalProps> = (args) => {
  const [isOpen, setIsOpen] = React.useState(false);
  function close() {
    setIsOpen(false);
  }
  return (
    <ThemeProvider>
      <>
        <Button onClick={() => setIsOpen(true)}>Open Modal</Button>
        <Modal onClose={close} isOpen={isOpen}>
          <ModalHeader>Hello world</ModalHeader>
          <ModalBody>
            Proin ut dui sed metus pharetra hend rerit vel non mi. Nulla ornare
            faucibus ex, non facilisis nisl. Maecenas aliquet mauris ut tempus.
          </ModalBody>
          <ModalFooter>
            <ModalButton kind="tertiary" onClick={close}>
              Cancel
            </ModalButton>
            <ModalButton onClick={close}>Okay</ModalButton>
          </ModalFooter>
        </Modal>
      </>
    </ThemeProvider>
  );
};

export const Default = Template.bind({});
Default.args = {};