import type { Meta, StoryObj } from "@storybook/react-vite";
import { StarRegularIcon } from "alouette-icons/phosphor-icons/Star";
import { View } from "../primitives/View";
import { Story, neutralAndAccents } from "../story-components/Story";
import { Badge } from "./Badge";

type ThisStory = StoryObj<typeof Badge>;

const VARIANTS = ["solid", "solid.enabled", "outlined"] as const;
const SIZES = ["sm", "md"] as const;

export default {
  title: "alouette/Data/Badge",
  component: Badge,
  parameters: {
    componentSubtitle: "A small label for status, counts, or categories",
  },
  argTypes: {
    accent: {
      description: "The accent of the badge",
      control: "select",
      options: neutralAndAccents,
      table: { defaultValue: { summary: "brand" } },
    },
    variant: {
      description: "The visual style of the badge",
      control: "select",
      options: VARIANTS,
      table: { defaultValue: { summary: "solid" } },
    },
    size: {
      description: "The size of the badge",
      control: "select",
      options: SIZES,
      table: { defaultValue: { summary: "md" } },
    },
    children: { description: "The content of the badge", control: "text" },
  },
} satisfies Meta<typeof Badge>;

export const BadgePreviewStory: ThisStory = {
  name: "Badge Preview",
  parameters: {
    layout: "padded",
    chromatic: { disableSnapshot: true },
  },
  args: { accent: "brand", children: "New" },
  render: (args) => <Badge {...args} />,
};

export const BadgeVariantsStory: ThisStory = {
  name: "Badge Variants",
  render: () => (
    <Story>
      <Story.Section withSurface title="Variants">
        {VARIANTS.map((variant) => (
          <Badge key={variant} variant={variant}>
            {variant}
          </Badge>
        ))}
      </Story.Section>

      <Story.Section withSurface title="Accents">
        {VARIANTS.map((variant) => (
          <Story.SubSection key={variant} title={`variant=${variant}`}>
            <View className="flex-row gap-xs flex-wrap">
              {neutralAndAccents.map((accent) => (
                <Badge key={accent} accent={accent} variant={variant}>
                  {accent}
                </Badge>
              ))}
            </View>
          </Story.SubSection>
        ))}
      </Story.Section>

      <Story.Section withSurface title="Sizes">
        {SIZES.map((size) => (
          <View key={size} className="flex-row gap-xs items-center">
            <Badge size={size}>{size}</Badge>
            <Badge size={size} icon={<StarRegularIcon />}>
              {size} with icon
            </Badge>
          </View>
        ))}
      </Story.Section>
    </Story>
  ),
};