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

type StoryType = StoryObj<typeof Drawer>;

const meta: Meta<typeof Drawer> = {
  title: "Components/Drawer",
  component: Drawer,
  argTypes: {
    direction: {
      options: ["top", "bottom", "left", "right"],
      control: { type: "radio" },
    },
    ...excludeControls("isOpen", "closeLabel", "announce"),
  },
};

const Demo = (props: DrawerProps) => {
  const [open, setOpen] = useState(false);
  return (
    <>
      <Button onClick={() => setOpen(true)}>Show Drawer</Button>
      <Drawer {...props} onClose={() => setOpen(false)} isOpen={open}>
        <Drawer.Header>The Latin Drawer</Drawer.Header>
        <Drawer.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>
        </Drawer.Content>
      </Drawer>
    </>
  );
};

const LogoHeader = ({ direction, closeLabel }: DrawerProps) => {
  const [open, setOpen] = useState(false);
  return (
    <>
      <Button onClick={() => setOpen(true)}>Show Drawer</Button>
      <Drawer
        isOpen={open}
        onClose={() => setOpen(false)}
        direction={direction}
        closeLabel={closeLabel}
      >
        <Drawer.Header>
          <img
            src="https://quote.simplybusiness.com/assets/logos/insurers/harborway_insurance.png"
            alt="Provider logo"
          />
        </Drawer.Header>
        <Drawer.Content>Content.</Drawer.Content>
      </Drawer>
    </>
  );
};

const WithLongContentDemo = () => {
  const [open, setOpen] = useState(false);
  return (
    <>
      <Button onClick={() => setOpen(true)}>Show Drawer</Button>
      <Drawer direction="right" isOpen={open} onClose={() => setOpen(false)}>
        <Drawer.Header>
          Aliquam fringilla quam vel purus rhoncus isuere. Morbi augue augue,
          venenatis vel consectetur sed, vulputate et lorem. Int
        </Drawer.Header>
        <Drawer.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>
        </Drawer.Content>
      </Drawer>
    </>
  );
};

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

export const WithLogoHeader: StoryType = {
  render: (args: DrawerProps) => <LogoHeader {...args} />,
  args: {
    direction: "right",
    closeLabel: "Close",
  },
};

export const WithLongContent: StoryType = {
  render: () => <WithLongContentDemo />,
  args: {},
};

export default meta;
