/* eslint-disable react-hooks/rules-of-hooks */
import { useCallback, useState } from "react";

import { Button } from "../button";
import { Flex } from "../flex";
import { commonProps } from "../../utils/storybook";
import { ShowMoreButton } from ".";

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

const meta: Meta<typeof ShowMoreButton> = {
  title: "ShowMoreButton",
  component: ShowMoreButton,
  tags: ["autodocs"],
  argTypes: {
    isExpanded: {
      defaultValue: {
        summary: "false",
      },
    },
    ...commonProps,
  },
  args: {
    collapsedText: "Show more",
    expandedText: "Show less",
  },
};

export default meta;

type Story = StoryObj<typeof ShowMoreButton>;

export const Uncontrolled: Story = {
  render: (args) => <ShowMoreButton {...args} />,
};

export const Controlled: Story = {
  render: (args) => {
    const [isExpanded, setIsExpanded] = useState(false);
    const onClick = useCallback(() => {
      setIsExpanded((prev) => !prev);
    }, []);

    const onExpandedChange = useCallback((isExpanded: boolean) => {
      setIsExpanded(isExpanded);
    }, []);

    return (
      <Flex gap="2">
        <ShowMoreButton {...args} isExpanded={isExpanded} onExpandedChange={onExpandedChange} />
        <Button onClick={onClick}>Toggle</Button>
      </Flex>
    );
  },
};