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

import { ThemeProviderDecorators } from "@/storybook/Decorator";

import { Badge } from "./badge";

const meta = {
  title: "UI/Badge",
  component: Badge,
  tags: ["autodocs"],
  args: {
    size: "md",
  },
  decorators: ThemeProviderDecorators,
} satisfies Meta<typeof Badge>;

export default meta;

type Story = StoryObj<typeof Badge>;

export const DefaultBadge = {
  args: {
    children: "Label",
  },
} satisfies Story;

export const BadgeWithPrevIcon = {
  args: {
    children: "Label",
    leftIcon: {
      name: "Dot",
      size: 16,
      strokeWidth: 6,
    },
  },
  render: (args) => {
    return (
      <div className="flex gap-2">
        <Badge {...args} />
        <Badge {...args} variant="primary" />
        <Badge {...args} variant="error" />
        <Badge {...args} variant="warning" />
        <Badge {...args} variant="success" />
        <Badge {...args} variant="grayGreen" />
        <Badge {...args} variant="blueGray" />
        <Badge {...args} variant="blueLight" />
        <Badge {...args} variant="blue" />
        <Badge {...args} variant="indigo" />
        <Badge {...args} variant="violet" />
        <Badge {...args} variant="pink" />
      </div>
    );
  },
} satisfies Story;

export const BadgeWithLastIcon = {
  args: {
    children: "Label",
    rightIcon: {
      name: "ArrowRight",
    },
  },
  render: (args) => {
    return (
      <div className="flex gap-2">
        <Badge {...args} />
        <Badge {...args} variant="primary" />
        <Badge {...args} variant="error" />
        <Badge {...args} variant="warning" />
        <Badge {...args} variant="success" />
        <Badge {...args} variant="grayGreen" />
        <Badge {...args} variant="blueGray" />
        <Badge {...args} variant="blueLight" />
        <Badge {...args} variant="blue" />
        <Badge {...args} variant="indigo" />
        <Badge {...args} variant="violet" />
        <Badge {...args} variant="pink" />
      </div>
    );
  },
} satisfies Story;

export const BadgeWithClosable = {
  args: {
    children: "Label",
    closable: true,
    // eslint-disable-next-line no-console
    onClose: () => console.log("Close"),
  },
  render: (args) => {
    return (
      <div className="flex gap-2">
        <Badge {...args} />
        <Badge {...args} variant="primary" />
        <Badge {...args} variant="error" />
        <Badge {...args} variant="warning" />
        <Badge {...args} variant="success" />
        <Badge {...args} variant="grayGreen" />
        <Badge {...args} variant="blueGray" />
        <Badge {...args} variant="blueLight" />
        <Badge {...args} variant="blue" />
        <Badge {...args} variant="indigo" />
        <Badge {...args} variant="violet" />
        <Badge {...args} variant="pink" />
      </div>
    );
  },
} satisfies Story;