import { commonProps } from "../../utils/storybook";
import { Icons } from "../icons";
import { linkVariants } from "./link.styled";
import { Link } from ".";
import type { StoryObj, Meta } from "@storybook/react";

/**
 * The reusable Link component
 */
const meta: Meta<typeof Link> = {
  title: "Link",
  component: Link,
  tags: ["autodocs"],
  argTypes: {
    children: {
      description: "The content of the Link",
      type: "string",
      table: {
        type: { summary: "string" },
      },
    },
    href: {
      description: "The redirect url of the Link",
    },
    icon: {
      description: "The icon that will be rendered in the Link",
      options: ["", ...Object.keys(Icons)],
      table: {
        summary: "React.ReactNode",
      },
    },
    gap: {
      description: "The space between the icon and the children of the Link",
      options: Array.from({ length: 10 }, (_, i) => i),
      control: { type: "select" },
    },
    variant: {
      description: "Sets the variant of the Link",
      options: Object.keys(linkVariants),
      control: { type: "select" },
      table: {
        defaultValue: {
          summary: "primary",
        },
      },
    },
    ...commonProps,
  },
  args: {
    children: "https://chromaway.com/",
    href: "https://chromaway.com/",
  },
};

export default meta;

type Story = StoryObj<typeof Link>;

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 {
    icon: <Icon />,
  };
};

export const Default: Story = {
  render: (args) => <Link {...args} {...extractIconAsSpread(args.icon)} />,
};