import { circleQuestion } from "@simplybusiness/icons";
import type { Meta, StoryObj } from "@storybook/react";
import { useState } from "react";
import type { PopoverProps } from "..";
import { Button, Flex, Icon, Modal, Popover } from "..";
import { excludeControls } from "../../utils";

import "./Popover.story.styles.css";

type StoryType = StoryObj<typeof Popover>;

const meta: Meta<typeof Popover> = {
  title: "Components/Popover",
  component: Popover,
  argTypes: {
    ...excludeControls("trigger", "anchor", "children"),
  },
  decorators: [Story => <Story />],
};

export const Default: StoryType = {
  render: (args: PopoverProps) => <Popover {...args} />,
  args: {
    children: <>No way! Now I know everything I need to 🚀.</>,
    trigger: <Button variant="primary">If only I had more information</Button>,
  },
};

export const CustomTrigger: StoryType = {
  render: () => (
    <div className="popover-example">
      <Popover
        trigger={
          <Button variant="ghost">
            <Flex>
              <span>Occurrence Limit</span>
              <Icon icon={circleQuestion} />
            </Flex>
          </Button>
        }
      >
        This is the maximum amount of money you&apos;ll get to cover a single
        incident that occurs during the policy period, regardless of when
        it&apos;s reported.
      </Popover>
    </div>
  ),
};

export const NearBottomEdge: StoryType = {
  render: () => (
    <div style={{ marginTop: "90vh" }}>
      <Popover trigger={<Button variant="primary">Open — flips to top</Button>}>
        Near the bottom edge: the popover flips above the trigger so it stays in
        the viewport.
      </Popover>
    </div>
  ),
};

const InsideModalDemo = () => {
  const [open, setOpen] = useState(false);
  return (
    <>
      <Button onClick={() => setOpen(true)}>Open modal</Button>
      <Modal isOpen={open} onClose={() => setOpen(false)} closeLabel="Close">
        <Modal.Header>Popover inside a modal</Modal.Header>
        <Modal.Content>
          <p>
            The popover must render above the modal backdrop. Click the trigger
            below.
          </p>
          <Popover trigger={<Button variant="primary">Open popover</Button>}>
            Visible above the modal backdrop.
          </Popover>
        </Modal.Content>
      </Modal>
    </>
  );
};

export const InsideModal: StoryType = {
  render: () => <InsideModalDemo />,
};

export default meta;
