import type { Meta, StoryObj } from "@storybook/react";
import { useState } from "react";
import type { ModalProps } from ".";
import { Modal } from ".";
import { excludeControls } from "../../utils";
import { Button } from "../Button";
import { Text } from "../Text";
import { Accordion } from "../Accordion";

type StoryType = StoryObj<typeof Modal>;

const meta: Meta<typeof Modal> = {
  title: "Components/Modal",
  component: Modal,
  argTypes: {
    animation: {
      options: ["slideUp", "fade", "neither"],
      control: { type: "radio" },
      mapping: {
        slideUp: "slideUp",
        fade: "fade",
        neither: undefined,
      },
    },
    ...excludeControls("isOpen"),
  },
  args: {
    isFullScreen: false,
  },
};

const Demo = (props: ModalProps) => {
  const [open, setOpen] = useState(false);
  return (
    <>
      <Button onClick={() => setOpen(true)}>Show Modal</Button>
      <Modal {...props} isOpen={open} onClose={() => setOpen(false)}>
        <Modal.Header>The Latin Modal</Modal.Header>
        <Modal.Content>
          <p>
            Aliquam fringilla quam vel purus rhoncus interdum in quis sapien.
            Sed at eros et lectus mollis posuere. Morbi augue augue, venenatis
            vel consectetur sed, vulputate et lorem. Integer venenatis nibh
            molestie commodo lobortis. Phasellus sit amet dignissim nisi.
            Vivamus nisi augue, scelerisque commodo libero vitae, vulputate
            interdum ex. Integer non risus sollicitudin, cursus ipsum vitae,
            rhoncus nulla.
          </p>
          <Accordion
            showText="See more"
            hideText="See less"
            headerPosition="top"
            startOpen={false}
          >
            <p>
              Lorem ipsum dolor, sit amet consectetur adipisicing elit. Sequi
              repellendus deleniti architecto
            </p>
            <p>
              Lorem ipsum dolor, sit amet consectetur adipisicing elit. Sequi
              repellendus deleniti architecto
            </p>
          </Accordion>
        </Modal.Content>
      </Modal>
    </>
  );
};

const FullScreenDemo = (props: ModalProps) => {
  const [open, setOpen] = useState(false);
  return (
    <>
      <Button onClick={() => setOpen(true)} variant="secondary">
        Show Fullscreen Modal 🚀
      </Button>
      <Modal
        {...props}
        isOpen={open}
        isFullScreen
        onClose={() => setOpen(false)}
      >
        <Modal.Header>The Full Screen Modal</Modal.Header>
        <Modal.Content>
          Aliquam fringilla quam vel purus rhoncus interdum in quis sapien. Sed
          at eros et lectus mollis posuere. Morbi augue augue, venenatis vel
          consectetur sed, vulputate et lorem. Integer venenatis nibh molestie
          commodo lobortis. Phasellus sit amet dignissim nisi. Vivamus nisi
          augue, scelerisque commodo libero vitae, vulputate interdum ex.
          Integer non risus sollicitudin, cursus ipsum vitae, rhoncus nulla.
        </Modal.Content>
      </Modal>
    </>
  );
};

const WithAnimationDemo = (props: ModalProps) => {
  const [open, setOpen] = useState(false);
  return (
    <>
      <Button onClick={() => setOpen(true)}>
        Show Modal With Animation 🧙‍♂️
      </Button>
      <Modal
        animation="slideUp"
        {...props}
        onClose={() => setOpen(false)}
        isOpen={open}
      >
        <Modal.Header>The Latin Modal</Modal.Header>
        <Modal.Content>
          Aliquam fringilla quam vel purus rhoncus interdum in quis sapien. Sed
          at eros et lectus mollis posuere. Morbi augue augue, venenatis vel
          consectetur sed, vulputate et lorem. Integer venenatis nibh molestie
          commodo lobortis. Phasellus sit amet dignissim nisi. Vivamus nisi
          augue, scelerisque commodo libero vitae, vulputate interdum ex.
          Integer non risus sollicitudin, cursus ipsum vitae, rhoncus nulla.
        </Modal.Content>
      </Modal>
    </>
  );
};

const WithLongContentDemo = (props: ModalProps) => {
  const [open, setOpen] = useState(false);
  return (
    <>
      <Button onClick={() => setOpen(true)}>Show Modal</Button>
      <Modal {...props} isOpen={open} onClose={() => setOpen(false)}>
        <Modal.Header>
          Aliquam fringilla quam vel purus rhoncus isuere. Morbi augue augue,
          venenatis vel consectetur sed, vulputate et lorem. Int
        </Modal.Header>
        <Modal.Content>
          <Text>
            Aliquam fringilla quam vel purus rhoncus interdum in quis sapien.
            Sed at eros et lectus mollis posuere. Morbi augue augue, venenatis
            vel consectetur sed, vulputate et lorem. Integer venenatis nibh
            molestie commodo lobortis. Phasellus sit amet dignissim nisi.
            Vivamus nisi augue, scelerisque commodo libero vitae, vulputate
            interdum ex. Integer non risus sollicitudin, cursus ipsum vitae,
            rhoncus nulla.
          </Text>
          <Text>
            Aliquam fringilla quam vel purus rhoncus interdum in quis sapien.
            Sed at eros et lectus mollis posuere. Morbi augue augue, venenatis
            vel consectetur sed, vulputate et lorem. Integer venenatis nibh
            molestie commodo lobortis. Phasellus sit amet dignissim nisi.
            Vivamus nisi augue, scelerisque commodo libero vitae, vulputate
            interdum ex. Integer non risus sollicitudin, cursus ipsum vitae,
            rhoncus nulla.
          </Text>
          <Text>
            Aliquam fringilla quam vel purus rhoncus interdum in quis sapien.
            Sed at eros et lectus mollis posuere. Morbi augue augue, venenatis
            vel consectetur sed, vulputate et lorem. Integer venenatis nibh
            molestie commodo lobortis. Phasellus sit amet dignissim nisi.
            Vivamus nisi augue, scelerisque commodo libero vitae, vulputate
            interdum ex. Integer non risus sollicitudin, cursus ipsum vitae,
            rhoncus nulla.
          </Text>
          <Text>
            Aliquam fringilla quam vel purus rhoncus interdum in quis sapien.
            Sed at eros et lectus mollis posuere. Morbi augue augue, venenatis
            vel consectetur sed, vulputate et lorem. Integer venenatis nibh
            molestie commodo lobortis. Phasellus sit amet dignissim nisi.
            Vivamus nisi augue, scelerisque commodo libero vitae, vulputate
            interdum ex. Integer non risus sollicitudin, cursus ipsum vitae,
            rhoncus nulla.
          </Text>
          <Text>
            Aliquam fringilla quam vel purus rhoncus interdum in quis sapien.
            Sed at eros et lectus mollis posuere. Morbi augue augue, venenatis
            vel consectetur sed, vulputate et lorem. Integer venenatis nibh
            molestie commodo lobortis. Phasellus sit amet dignissim nisi.
            Vivamus nisi augue, scelerisque commodo libero vitae, vulputate
            interdum ex. Integer non risus sollicitudin, cursus ipsum vitae,
            rhoncus nulla.
          </Text>
          <Text>
            Aliquam fringilla quam vel purus rhoncus interdum in quis sapien.
            Sed at eros et lectus mollis posuere. Morbi augue augue, venenatis
            vel consectetur sed, vulputate et lorem. Integer venenatis nibh
            molestie commodo lobortis. Phasellus sit amet dignissim nisi.
            Vivamus nisi augue, scelerisque commodo libero vitae, vulputate
            interdum ex. Integer non risus sollicitudin, cursus ipsum vitae,
            rhoncus nulla.
          </Text>
          <Text>
            Aliquam fringilla quam vel purus rhoncus interdum in quis sapien.
            Sed at eros et lectus mollis posuere. Morbi augue augue, venenatis
            vel consectetur sed, vulputate et lorem. Integer venenatis nibh
            molestie commodo lobortis. Phasellus sit amet dignissim nisi.
            Vivamus nisi augue, scelerisque commodo libero vitae, vulputate
            interdum ex. Integer non risus sollicitudin, cursus ipsum vitae,
            rhoncus nulla.
          </Text>
        </Modal.Content>
      </Modal>
    </>
  );
};

const ChildModal = () => {
  const [showModal, setShowModal] = useState<boolean>(false);
  const show = () => setShowModal(true);
  const hide = () => setShowModal(false);

  return (
    <>
      <Button onClick={show}>Show child modal</Button>
      <Modal isOpen={showModal} onClose={hide} animation="slideUp">
        <Modal.Header>Howdy</Modal.Header>
        <Modal.Content>
          <Text>
            Closing or cancelling (with Escape key) should leave the parent
            modal open.
          </Text>
        </Modal.Content>
      </Modal>
    </>
  );
};

const WithNestedDemo = (props: ModalProps) => {
  const [open, setOpen] = useState(false);
  return (
    <>
      <Button onClick={() => setOpen(true)}>Show Nested Modal</Button>
      <Modal onClose={() => setOpen(false)} {...props} isOpen={open}>
        <Modal.Header>The Latin Modal</Modal.Header>
        <Modal.Content>
          <Text>
            Closing or cancelling the next modal should leave me open.
          </Text>
          <ChildModal />
        </Modal.Content>
      </Modal>
    </>
  );
};

export const Default: StoryType = {
  render: (args: ModalProps) => <Demo {...args} />,
  args: {
    closeLabel: "Close",
  },
};

export const FullScreen: StoryType = {
  render: (args: ModalProps) => <FullScreenDemo {...args} />,
  args: {
    closeLabel: "Close",
  },
};

export const WithAnimation: StoryType = {
  render: (args: ModalProps) => <WithAnimationDemo {...args} />,
  args: {
    closeLabel: "Close",
  },
};

export const WithLongContent: StoryType = {
  render: (args: ModalProps) => <WithLongContentDemo {...args} />,
  args: {
    closeLabel: "Close",
  },
};

export const WithNested: StoryType = {
  render: (args: ModalProps) => <WithNestedDemo {...args} />,
  args: {
    closeLabel: "Close",
  },
};

export default meta;
