/* eslint-disable react-hooks/rules-of-hooks */
import { useRef, useState } from "react";
import { Button, Flex, Text } from "../../../components";
import { useIsOverflow } from "./";

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

const meta: Meta = {
  title: "Hooks/useIsOverflow",
  argTypes: {
    ref: {
      control: false,
      description: "The ref of the Element to check overflow for.",
      table: {
        type: {
          summary: "React.MutableRefObject<T>",
        },
      },
    },
    direction: {
      control: false,
      description:
        "Specifies the direction in which to detect overflow. If set to `any` X & Y overflow will be searched for.",
      table: {
        defaultValue: {
          summary: "vertical",
        },
        type: {
          summary: "vertical | horizontal | any",
        },
      },
      options: ["vertical", "horizontal", "any"],
    },
    trigger: {
      control: false,
      description:
        "optional trigger input of `unknown` type that when changed will re-search for overflow. It could for example be the text within a container as demonstrated in the demo.",
      table: {
        type: {
          summary: "unknown",
        },
      },
    },
  },
};

export default meta;
type Story = StoryObj<typeof useIsOverflow>;

export const Default: Story = {
  render: () => {
    const [content, setContent] = useState("i");
    const ref = useRef<HTMLSpanElement>(null);
    const isOverflow = useIsOverflow({ ref, direction: "horizontal", trigger: content });

    const handleLongText = () => {
      setContent("long");
    };

    const handleShortText = () => {
      setContent("i");
    };

    return (
      <Flex direction="column" gap="2">
        <span
          ref={ref}
          style={{
            display: "inline-block",
            width: "10px",
            outline: "1px solid red",
            color: "white",
          }}
        >
          {content}
        </span>
        <Text css={{ color: "$light-off-white" }}>
          Is text overflowing? {isOverflow ? "yes" : "no"}
        </Text>
        <Button type="button" onClick={handleLongText} text="make content long" />
        <Button type="button" onClick={handleShortText} text="make content short" />
      </Flex>
    );
  },
};