import { Button } from "..";
import { commonProps } from "../../../utils/storybook";
import { Icons } from "../../icons";

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

const meta: Meta<typeof Button> = {
  title: "Button",
  component: Button,
  tags: ["autodocs"],
  args: {
    children: "Click Me!",
  },
  argTypes: {
    variant: {
      description: "Sets the display variant of the button.",
      options: ["primary", "secondary", "ghost"],
      table: {
        type: { summary: `primary | secondary | ghost | unstyled` },
        defaultValue: { summary: "primary" },
      },
    },
    size: {
      description: "Sets the size of the button.",
      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: "disable",
      },
    },
    children: {
      control: {
        type: "text",
      },
    },
    ...commonProps,
  },
};

export default meta;

type Story = StoryObj<typeof Button>;

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) => <Button {...args} {...extractIconAsSpread(args.extra)} />,
};