import type { Meta, StoryObj } from "@storybook/react-vite";
import { StarRegularIcon } from "alouette-icons/phosphor-icons/Star";
import type { ReactNode } from "react";
import type { AccentOrNeutral } from "../../core/AlouetteConfig";
import { AccentScope } from "../containers/AccentScope";
import { Story, neutralAndAccents } from "../story-components/Story";
import { StoryGrid } from "../story-components/StoryGrid";
import { Icon } from "./Icon";
import { Text } from "./Text";
import { View } from "./View";

type ThisStory = StoryObj<typeof Icon>;

export default {
  title: "alouette/Primitives/Icon",
  component: Icon,
  parameters: {
    componentSubtitle:
      "Renders an SVG icon, tinted via a text-colour className and sized in px",
    docs: {
      description: {
        component: `### Usage
- **icon**: an SVG element, e.g. \`<StarRegularIcon />\` from \`alouette-icons/phosphor-icons/*\`
- **size**: square size in px (defaults to 20)
- **className**: text-colour token driving the tint (defaults to \`text-sharp\`)

~~~tsx
<Icon icon={<StarRegularIcon />} className="text-accent" size={24} />
~~~`,
      },
    },
  },
} satisfies Meta<typeof Icon>;

export const PreviewStory: ThisStory = {
  name: "Icon Preview",
  parameters: {
    layout: "padded",
    chromatic: { disableSnapshot: true },
  },
  args: {
    icon: <StarRegularIcon />,
  },
};

interface TintRowProps {
  className: string;
}

function TintRow({ className }: TintRowProps): ReactNode {
  return (
    <View className="flex-row gap-sm items-center">
      <Icon icon={<StarRegularIcon />} className={className} size={24} />
      <Text className={`font-mono text-xs ${className}`}>{className}</Text>
    </View>
  );
}

function AccentColumn({ accent }: { accent: AccentOrNeutral }): ReactNode {
  return (
    <StoryGrid.Col title={accent}>
      <AccentScope accent={accent}>
        <View className="gap-xs rounded-sm bg-surface p-xs">
          <TintRow className="text-sharp" />
          <TintRow className="text-muted" />
          <TintRow className="text-accent" />
          <TintRow className="text-disabled-sharp" />
          <TintRow className="text-disabled-muted" />
        </View>
        <View className="gap-xs rounded-sm bg-interactive-filled-pressable p-xs mt-xs">
          <TintRow className="text-on-accent" />
          <TintRow className="text-on-accent-muted" />
        </View>
      </AccentScope>
    </StoryGrid.Col>
  );
}

export const VariantsStory: ThisStory = {
  name: "Icon Variants",
  render: () => (
    <Story>
      <Story.Section title="Tints across accents">
        <StoryGrid.Row flexWrap>
          {neutralAndAccents.map((accent) => (
            <AccentColumn key={accent} accent={accent} />
          ))}
        </StoryGrid.Row>
      </Story.Section>

      <Story.Section title="Sizes">
        <View className="flex-row gap-m items-end">
          {([16, 20, 24, 32, 48] as const).map((size) => (
            <View key={size} className="gap-xs items-center">
              <Icon icon={<StarRegularIcon />} size={size} />
              <Text className="font-mono text-xs text-muted">{size}</Text>
            </View>
          ))}
        </View>
      </Story.Section>
    </Story>
  ),
};