import type { Meta, StoryObj } from "@storybook/react"
import { SvgUse } from "../../shared/SvgUse"
import { IconButton } from "./IconButton"

/**
 * A button component designed specifically for displaying icons.
 * Perfect for toolbar actions, navigation buttons, and compact UI elements.
 *
 * ## Props
 * - `variant`: "classic" | "solid" | "soft" | "surface" | "outline" | "ghost" (default: "solid")
 * - `size`: "1" | "2" | "3" | "4" (default: "2")
 * - `color`: "gray" | "gold" | "bronze" | "brown" | "yellow" | "amber" | "orange" | "tomato" | "red" | "ruby" | "crimson" | "pink" | "plum" | "purple" | "violet" | "iris" | "indigo" | "blue" | "cyan" | "teal" | "jade" | "green" | "grass" | "lime" | "mint" | "sky" (default: "gray")
 * - `radius`: "none" | "small" | "medium" | "large" | "full"
 * - `highContrast`: boolean
 * - `disabled`: boolean
 * - `asChild`: boolean
 */
const meta = {
  title: "base/components/IconButton",
  component: IconButton,
  tags: ["autodocs"],
  argTypes: {
    variant: {
      control: "select",
      options: ["classic", "solid", "soft", "surface", "outline", "ghost"],
      description: "The visual style of the icon button",
    },
    size: {
      control: "select",
      options: ["1", "2", "3", "4"],
      description: "The size of the icon button",
    },
    color: {
      control: "select",
      options: [
        "gray",
        "gold",
        "bronze",
        "brown",
        "yellow",
        "amber",
        "orange",
        "tomato",
        "red",
        "ruby",
        "crimson",
        "pink",
        "plum",
        "purple",
        "violet",
        "iris",
        "indigo",
        "blue",
        "cyan",
        "teal",
        "jade",
        "green",
        "grass",
        "lime",
        "mint",
        "sky",
      ],
      description: "The color theme of the icon button",
    },
    radius: {
      control: "select",
      options: ["none", "small", "medium", "large", "full"],
      description: "The border radius of the icon button",
    },
    highContrast: {
      control: "boolean",
      description: "Whether to use high contrast colors",
    },
    disabled: {
      control: "boolean",
      description: "Whether the icon button is disabled",
    },
  },
  parameters: {
    layout: "centered",
  },
  args: {
    children: <SvgUse icon="home-solid" />,
  },
} satisfies Meta<typeof IconButton>

export default meta
type Story = StoryObj<typeof meta>

/**
 * Default icon button with a home icon.
 */
export const Default: Story = {
  args: {},
}

/**
 * Icon button with different variants.
 */
export const Variants: Story = {
  render: () => (
    <div className="flex gap-2">
      <IconButton variant="solid">
        <SvgUse icon="home-solid" className="size-4" />
      </IconButton>
      <IconButton variant="outline">
        <SvgUse icon="home-solid" className="size-4" />
      </IconButton>
      <IconButton variant="soft">
        <SvgUse icon="home-solid" className="size-4" />
      </IconButton>
      <IconButton variant="surface">
        <SvgUse icon="home-solid" className="size-4" />
      </IconButton>
      <IconButton variant="classic">
        <SvgUse icon="home-solid" className="size-4" />
      </IconButton>
    </div>
  ),
}

/**
 * Icon button with different sizes.
 */
export const Sizes: Story = {
  render: () => (
    <div className="flex items-center gap-2">
      <IconButton size="1">
        <SvgUse icon="home-solid" />
      </IconButton>
      <IconButton size="2">
        <SvgUse icon="home-solid" />
      </IconButton>
      <IconButton size="3">
        <SvgUse icon="home-solid" />
      </IconButton>
      <IconButton size="4">
        <SvgUse icon="home-solid" />
      </IconButton>
    </div>
  ),
}

/**
 * Icon button with different colors.
 */
export const Colors: Story = {
  render: () => (
    <div className="grid grid-cols-6 gap-2">
      <IconButton color="gray">
        <SvgUse icon="home-solid" className="size-4" />
      </IconButton>
      <IconButton color="blue">
        <SvgUse icon="home-solid" className="size-4" />
      </IconButton>
      <IconButton color="green">
        <SvgUse icon="home-solid" className="size-4" />
      </IconButton>
      <IconButton color="red">
        <SvgUse icon="home-solid" className="size-4" />
      </IconButton>
      <IconButton color="purple">
        <SvgUse icon="home-solid" className="size-4" />
      </IconButton>
      <IconButton color="orange">
        <SvgUse icon="home-solid" className="size-4" />
      </IconButton>
    </div>
  ),
}

/**
 * Icon button with different border radius options.
 */
export const Radius: Story = {
  render: () => (
    <div className="flex gap-2">
      <IconButton radius="none">
        <SvgUse icon="home-solid" className="size-4" />
      </IconButton>
      <IconButton radius="small">
        <SvgUse icon="home-solid" className="size-4" />
      </IconButton>
      <IconButton radius="medium">
        <SvgUse icon="home-solid" className="size-4" />
      </IconButton>
      <IconButton radius="large">
        <SvgUse icon="home-solid" className="size-4" />
      </IconButton>
      <IconButton radius="full">
        <SvgUse icon="home-solid" className="size-4" />
      </IconButton>
    </div>
  ),
}

/**
 * Icon button in disabled state.
 */
export const Disabled: Story = {
  render: () => (
    <div className="flex gap-2">
      <IconButton disabled>
        <SvgUse icon="home-solid" className="size-4" />
      </IconButton>
      <IconButton variant="outline" disabled>
        <SvgUse icon="home-solid" className="size-4" />
      </IconButton>
      <IconButton variant="classic" disabled>
        <SvgUse icon="home-solid" className="size-4" />
      </IconButton>
    </div>
  ),
}

/**
 * Common icon button examples for different use cases.
 */
export const CommonIcons: Story = {
  render: () => (
    <div className="flex gap-4">
      <IconButton variant="ghost" title="Settings">
        <SvgUse icon="dots-vertical" className="size-4" />
      </IconButton>
      <IconButton variant="ghost" title="Close">
        <SvgUse icon="close-outline" className="size-4" />
      </IconButton>
      <IconButton variant="ghost" title="Check">
        <SvgUse icon="check-outline" className="size-4" />
      </IconButton>
      <IconButton variant="ghost" title="Add">
        <SvgUse icon="add-circle-outline" className="size-4" />
      </IconButton>
      <IconButton variant="ghost" title="Search">
        <SvgUse icon="reload" className="size-4" />
      </IconButton>
      <IconButton variant="ghost" title="Menu">
        <SvgUse icon="dots-vertical" className="size-4" />
      </IconButton>
    </div>
  ),
}

/**
 * Icon button with high contrast for better accessibility.
 */
export const HighContrast: Story = {
  render: () => (
    <div className="flex gap-2">
      <IconButton highContrast>
        <SvgUse icon="home-solid" className="size-4" />
      </IconButton>
      <IconButton variant="outline" highContrast>
        <SvgUse icon="home-solid" className="size-4" />
      </IconButton>
    </div>
  ),
}

/**
 * Icon button with different states and interactions.
 */
export const Interactive: Story = {
  render: () => (
    <div className="flex gap-2">
      <IconButton variant="solid" color="blue" onClick={() => alert("Home button clicked!")}>
        <SvgUse icon="home-solid" className="size-4" />
      </IconButton>
      <IconButton variant="outline" color="green" onClick={() => alert("Settings button clicked!")}>
        <SvgUse icon="dots-vertical" className="size-4" />
      </IconButton>
    </div>
  ),
}