import { commonProps } from "../../utils/storybook";
import { Box } from "../box";
import { Icons } from "../icons";
import { LinkButton } from ".";
import type { StoryObj, Meta } from "@storybook/react";

/**
 * The reusable `<LinkButton>` component that looks like a button but actually an `<a>` tag element under the hook to fullfil the semantic usage in some cases.
 */
const meta: Meta<typeof LinkButton> = {
  title: "LinkButton",
  component: LinkButton,
  tags: ["autodocs"],
  args: {
    text: "https://chromaway.com/",
    href: "https://chromaway.com/",
  },
  argTypes: {
    variant: {
      description: "Sets the display variant of the LinkButton.",
      options: ["primary", "secondary", "ghost"],
      table: {
        type: { summary: `primary | secondary | ghost | unstyled` },
        defaultValue: { summary: "primary" },
      },
    },
    size: {
      description: "Sets the size of the LinkButton.",
      options: ["s", "l"],
      table: {
        type: { summary: `s | l` },
        defaultValue: { summary: "l" },
      },
    },
    extra: {
      options: ["", ...Object.keys(Icons)],
      table: {
        summary: "React.ReactNode",
      },
    },
    extraPosition: {
      control: "select",
      table: {
        defaultValue: {
          summary: "right",
        },
      },
    },
    text: {
      control: {
        type: "text",
      },
    },
    children: {
      control: {
        type: "disable",
      },
    },
    ...commonProps,
  },
};

export default meta;

type Story = StoryObj<typeof LinkButton>;

const extractIconAsSpread = (extra: React.ReactNode | undefined) => {
  const Icon = Icons[extra as keyof typeof Icons];
  // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
  if (!Icon) {
    return {};
  }
  return {
    extra: <Icon />,
  };
};

export const Default: Story = {
  render: (args) => (
    <Box css={{ width: "240px" }}>
      <LinkButton {...args} {...extractIconAsSpread(args.extra)} />
    </Box>
  ),
};