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

/**
 * A ToggleGroup component for controlling a group of toggles.
 */
const meta = {
  title: "base/form/ToggleGroup",
  component: ToggleGroup,
  tags: ["autodocs"],
  parameters: {
    layout: "centered",
  },
} satisfies Meta<typeof ToggleGroup>

export default meta

type Story = StoryObj<typeof meta>

/**
 * Basic toggle group with text items.
 */
export const Basic: Story = {
  args: {
    type: "single",
  },
  render: () => (
    <ToggleGroup type="single" defaultValue="center">
      <ToggleGroupItem value="left">Left</ToggleGroupItem>
      <ToggleGroupItem value="center">Center</ToggleGroupItem>
      <ToggleGroupItem value="right">Right</ToggleGroupItem>
    </ToggleGroup>
  ),
}

/**
 * Toggle group with outline variant.
 */
export const Outline: Story = {
  args: {
    type: "single",
    variant: "outline",
  },
  render: () => (
    <ToggleGroup type="single" variant="outline" defaultValue="week">
      <ToggleGroupItem value="day">Day</ToggleGroupItem>
      <ToggleGroupItem value="week">Week</ToggleGroupItem>
      <ToggleGroupItem value="month">Month</ToggleGroupItem>
      <ToggleGroupItem value="year">Year</ToggleGroupItem>
    </ToggleGroup>
  ),
}

/**
 * Toggle group allowing multiple selections.
 */
export const Multiple: Story = {
  args: {
    type: "multiple",
    variant: "outline",
  },
  render: () => (
    <ToggleGroup type="multiple" variant="outline" defaultValue={["bold", "italic"]}>
      <ToggleGroupItem value="bold">
        <SvgUse icon="whatsapp" />
      </ToggleGroupItem>
      <ToggleGroupItem value="italic">
        <SvgUse icon="linkedin" />
      </ToggleGroupItem>
      <ToggleGroupItem value="underline">
        <SvgUse icon="twitter-x" />
      </ToggleGroupItem>
      <ToggleGroupItem value="strikethrough">
        <SvgUse icon="facebook-messenger" />
      </ToggleGroupItem>
    </ToggleGroup>
  ),
}

/**
 * Toggle group with different size variants.
 */
export const Sizes: Story = {
  args: {
    type: "single",
  },
  render: () => (
    <div className="flex flex-col gap-4">
      <ToggleGroup type="single" size="sm" defaultValue="apple">
        <ToggleGroupItem value="apple">Apple</ToggleGroupItem>
        <ToggleGroupItem value="banana">Banana</ToggleGroupItem>
        <ToggleGroupItem value="orange">Orange</ToggleGroupItem>
      </ToggleGroup>

      <ToggleGroup type="single" defaultValue="apple">
        <ToggleGroupItem value="apple">Apple</ToggleGroupItem>
        <ToggleGroupItem value="banana">Banana</ToggleGroupItem>
        <ToggleGroupItem value="orange">Orange</ToggleGroupItem>
      </ToggleGroup>

      <ToggleGroup type="single" size="lg" defaultValue="apple">
        <ToggleGroupItem value="apple">Apple</ToggleGroupItem>
        <ToggleGroupItem value="banana">Banana</ToggleGroupItem>
        <ToggleGroupItem value="orange">Orange</ToggleGroupItem>
      </ToggleGroup>
    </div>
  ),
}

/**
 * Toggle group with icons and text.
 */
export const WithIconsAndText: Story = {
  args: {
    type: "single",
    variant: "outline",
  },
  render: () => (
    <ToggleGroup type="single" variant="outline" defaultValue="list">
      <ToggleGroupItem value="grid">
        <SvgUse icon="facebook-messenger" className="mr-1" />
        Facebook
      </ToggleGroupItem>
      <ToggleGroupItem value="list">
        <SvgUse icon="whatsapp" className="mr-1" />
        WhatsApp
      </ToggleGroupItem>
      <ToggleGroupItem value="columns">
        <SvgUse icon="linkedin" className="mr-1" />
        LinkedIn
      </ToggleGroupItem>
    </ToggleGroup>
  ),
}

/**
 * Toggle group with disabled items.
 */
export const DisabledItems: Story = {
  args: {
    type: "single",
    variant: "outline",
  },
  render: () => (
    <ToggleGroup type="single" variant="outline" defaultValue="medium">
      <ToggleGroupItem value="low">Low</ToggleGroupItem>
      <ToggleGroupItem value="medium">Medium</ToggleGroupItem>
      <ToggleGroupItem value="high">High</ToggleGroupItem>
      <ToggleGroupItem value="critical" disabled>
        Critical
      </ToggleGroupItem>
    </ToggleGroup>
  ),
}

/**
 * Practical example of using ToggleGroup for text alignment.
 */
export const TextAlignment: Story = {
  args: {
    type: "single",
    size: "sm",
    variant: "outline",
  },
  render: () => (
    <div className="w-[400px] p-4 border rounded-md space-y-4">
      <div className="flex justify-between items-center">
        <h3 className="text-sm font-medium">Text Alignment</h3>
        <ToggleGroup type="single" size="sm" variant="outline" defaultValue="left">
          <ToggleGroupItem value="left">
            <SvgUse icon="align-left" />
          </ToggleGroupItem>
          <ToggleGroupItem value="center">
            <SvgUse icon="align-center" />
          </ToggleGroupItem>
          <ToggleGroupItem value="right">
            <SvgUse icon="align-right" />
          </ToggleGroupItem>
          <ToggleGroupItem value="justify">
            <SvgUse icon="align-justify" />
          </ToggleGroupItem>
        </ToggleGroup>
      </div>
      <div className="h-32 bg-muted/20 border rounded-md p-4">
        <p className="text-sm text-muted-foreground">
          Sample text that would be aligned according to the selected alignment option.
        </p>
      </div>
    </div>
  ),
}

/**
 * Example of using ToggleGroup for view selection.
 */
export const ViewToggle: Story = {
  args: {
    type: "single",
    variant: "outline",
    size: "sm",
  },
  render: () => (
    <div className="w-[600px] border rounded-lg p-4 space-y-4">
      <div className="flex items-center justify-between">
        <h3 className="text-lg font-medium">Gallery</h3>
        <ToggleGroup type="single" variant="outline" size="sm" defaultValue="grid">
          <ToggleGroupItem value="grid">
            <SvgUse icon="grid" />
          </ToggleGroupItem>
          <ToggleGroupItem value="list">
            <SvgUse icon="list" />
          </ToggleGroupItem>
        </ToggleGroup>
      </div>

      <div className="grid grid-cols-3 gap-4">
        {[1, 2, 3, 4, 5, 6].map(item => (
          <div
            key={item}
            className="aspect-square rounded-md bg-muted flex items-center justify-center"
          >
            <SvgUse icon="image" className="size-8 text-muted-foreground/50" />
          </div>
        ))}
      </div>
    </div>
  ),
}