import type { Meta, StoryObj } from "@storybook/vue3-vite"
import ButtonAction from "./ButtonAction.vue"
import { componentDoc } from "@/lib/storybook"

const meta = {
  title: "Elements/Action/ButtonAction",
  component: ButtonAction,
  tags: ["autodocs"],
  parameters: componentDoc("ButtonAction", { barrel: "action" }),
  args: { label: "Action" },
} satisfies Meta<typeof ButtonAction>

export default meta
type Story = StoryObj<typeof meta>

export const Default: Story = {
  args: { label: "Action" },
}

export const Secondary: Story = {
  args: { label: "Secondary", variant: "secondary" },
}

export const Destructive: Story = {
  args: { label: "Delete", variant: "destructive" },
}

export const Outline: Story = {
  args: { label: "Outline", variant: "outline" },
}

export const Ghost: Story = {
  args: { label: "Ghost", variant: "ghost" },
}

export const LinkVariant: Story = {
  args: { label: "Link", variant: "link" },
}

export const WithIcon: Story = {
  args: { label: "Save", icon: "save" },
}

export const Small: Story = {
  args: { label: "Small", size: "sm" },
}

export const Large: Story = {
  args: { label: "Large", size: "lg" },
}

export const Disabled: Story = {
  args: { label: "Disabled", disabled: true },
}

export const FullWidth: Story = {
  args: { label: "Full width", block: true },
}

export const AsLink: Story = {
  args: {
    label: "Open docs",
    href: "https://example.com",
    target: "_blank",
  },
}

export const WithConfirm: Story = {
  args: {
    label: "Delete",
    variant: "destructive",
    confirm: true,
    confirmMessage: "Are you sure you want to delete this record?",
    emit: "delete-record",
  },
}

export const VariantMatrix: Story = {
  args: {} as never,
  render: () => ({
    components: { ButtonAction },
    template: `
      <div class="flex flex-wrap gap-2">
        <ButtonAction label="default" />
        <ButtonAction label="secondary" variant="secondary" />
        <ButtonAction label="destructive" variant="destructive" />
        <ButtonAction label="outline" variant="outline" />
        <ButtonAction label="ghost" variant="ghost" />
        <ButtonAction label="link" variant="link" />
        <ButtonAction label="success" variant="success" />
        <ButtonAction label="warning" variant="warning" />
        <ButtonAction label="info" variant="info" />
      </div>
    `,
  }),
}
