import { Story, Meta } from "@storybook/react";

import { ModalProps } from "./Modal";
import { Modal, ModalBody, ModalContent, ModalFooter, ModalHeader } from ".";
import Block from "../../atoms/Block";
import Button from "../../atoms/Button";

export default {
  title: "Component/Compounds/Modal",
  component: Modal,
  parameters: {
    component: Modal,
    previewTabs: {
      canvas: {
        hidden: true,
      },
    },
    viewMode: "docs",
  },
} as Meta;

interface ExampleProps {
  children?: React.ReactNode;
  classes: string;
}

const Template: Story<ModalProps> = (args) => (
  <Modal show={true} hasBackdrop onClose={() => {}}>
    <ModalHeader title={"Modal title"} />
    <ModalBody>
      <ModalContent>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque in
        tempus felis, quis interdum magna. Aliquam erat volutpat. Quisque massa
        arcu, faucibus at suscipit non, ultricies sed diam. Sed accumsan
        pellentesque sodales. Etiam scelerisque faucibus diam vel tincidunt.
        Integer non consequat nisl, sit amet pharetra mi.
      </ModalContent>
    </ModalBody>
    <ModalFooter>
      <Button variation="primary" className="flex-auto py-4">
        Submit
      </Button>
      <Button variation="secondary" className="flex-auto py-4">
        Cancel
      </Button>
    </ModalFooter>
  </Modal>
);

const Example: Story<ExampleProps> = (args) => {
  const classes = args.classes;
  return classes ? (
    <Block className={args.classes}>{args.children}</Block>
  ) : (
    <>{args.children}</>
  );
};

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

export const ModalWithContent = Example.bind({});
ModalWithContent.args = {
  children: (
    <Modal show={true} onClose={() => {}}>
      <ModalHeader title={"Modal title"} subtitle="Modal subtitle" />
      <ModalBody>
        <ModalContent className="py-8">
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque in
          tempus felis, quis interdum magna. Aliquam erat volutpat. Quisque
          massa arcu, faucibus at suscipit non, ultricies sed diam. Sed accumsan
          pellentesque sodales. Etiam scelerisque faucibus diam vel tincidunt.
          Integer non consequat nisl, sit amet pharetra mi.
        </ModalContent>
      </ModalBody>
      <ModalFooter className="justify-between">
        <Button variation="primary" className="flex-auto py-4">
          Submit
        </Button>
        <Button variation="secondary" className="flex-auto py-4">
          Cancel
        </Button>
      </ModalFooter>
    </Modal>
  ),
  classes: "flex items-center justify-center w-full",
};
