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

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

const meta: Meta = {
  title: "Hooks/useIsFocused",
  argTypes: {
    ref: {
      control: false,
      description: "The ref of the Element to check focus state of.",
      table: {
        type: {
          summary: "React.MutableRefObject<T>",
        },
      },
    },
  },
};

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

export const Default: Story = {
  render: () => {
    const ref = useRef<HTMLInputElement>(null);
    const { isFocused } = useIsFocused(ref);

    return (
      <Flex direction="column" gap="2">
        <Input
          label="Focus and blur this input to see the hook in action"
          ref={ref}
          autoComplete="off"
        />
        <Text css={{ color: "$light-off-white" }}>
          Is input focused? {isFocused ? "yes" : "no"}
        </Text>
      </Flex>
    );
  },
};