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

/**
 * A Toggle component used to toggle a single state on/off like a button.
 */
const meta = {
  title: "base/form/Toggle",
  component: Toggle,
  tags: ["autodocs"],
  parameters: {
    layout: "centered",
  },
} satisfies Meta<typeof Toggle>

export default meta

type Story = StoryObj<typeof meta>

/**
 * Basic toggle button that can be pressed to toggle state.
 */
export const Basic: Story = {
  render: () => <Toggle>Toggle</Toggle>,
}

/**
 * Toggle with the outline variant.
 */
export const Outline: Story = {
  render: () => <Toggle variant="outline">Outline Toggle</Toggle>,
}

/**
 * Toggle in its toggled-on state.
 */
export const Pressed: Story = {
  render: () => <Toggle defaultPressed>Pressed</Toggle>,
}

/**
 * Toggle that can't be interacted with.
 */
export const Disabled: Story = {
  render: () => (
    <div className="flex flex-col gap-4">
      <Toggle disabled>Disabled</Toggle>
      <Toggle disabled defaultPressed>
        Disabled Pressed
      </Toggle>
    </div>
  ),
}

/**
 * Toggle with an icon.
 */
export const WithIcon: Story = {
  render: () => (
    <div className="flex gap-4">
      <Toggle>
        <SvgUse icon="facebook-messenger" />
        <span>Facebook</span>
      </Toggle>
      <Toggle defaultPressed>
        <SvgUse icon="whatsapp" />
        <span>WhatsApp</span>
      </Toggle>
      <Toggle>
        <SvgUse icon="linkedin" />
        <span>LinkedIn</span>
      </Toggle>
    </div>
  ),
}

/**
 * Toggle with icon only.
 */
export const IconOnly: Story = {
  render: () => (
    <div className="flex gap-2">
      <Toggle aria-label="Toggle facebook">
        <SvgUse icon="facebook-messenger" />
      </Toggle>
      <Toggle aria-label="Toggle whatsapp" defaultPressed>
        <SvgUse icon="whatsapp" />
      </Toggle>
      <Toggle aria-label="Toggle linkedin">
        <SvgUse icon="linkedin" />
      </Toggle>
    </div>
  ),
}

/**
 * Toggle with different size variants.
 */
export const Sizes: Story = {
  render: () => (
    <div className="flex flex-col gap-4">
      <div className="flex gap-4 items-center">
        <Toggle size="sm">Small</Toggle>
        <Toggle size="default">Default</Toggle>
        <Toggle size="lg">Large</Toggle>
      </div>
      <div className="flex gap-4 items-center">
        <Toggle size="sm" variant="outline">
          Small
        </Toggle>
        <Toggle size="default" variant="outline">
          Default
        </Toggle>
        <Toggle size="lg" variant="outline">
          Large
        </Toggle>
      </div>
    </div>
  ),
}

/**
 * Practical example of using Toggle in a text editor toolbar.
 */
export const TextEditorToolbar: Story = {
  render: () => (
    <div className="flex flex-col gap-4 w-full border rounded-md shadow-sm p-4">
      <div className="flex items-center gap-1 border-b pb-3">
        <Toggle aria-label="Bold" variant="outline" size="sm">
          <SvgUse icon="whatsapp" />
        </Toggle>
        <Toggle aria-label="Italic" variant="outline" size="sm">
          <SvgUse icon="linkedin" />
        </Toggle>
        <Toggle aria-label="Underline" variant="outline" size="sm">
          <SvgUse icon="twitter-x" />
        </Toggle>
        <Toggle aria-label="Strikethrough" variant="outline" size="sm">
          <SvgUse icon="facebook-messenger" />
        </Toggle>

        <div className="h-4 w-px bg-muted mx-1" />

        <Toggle aria-label="Align left" variant="outline" size="sm">
          <SvgUse icon="align-left" />
        </Toggle>
        <Toggle aria-label="Align center" variant="outline" size="sm">
          <SvgUse icon="align-center" />
        </Toggle>
        <Toggle aria-label="Align right" variant="outline" size="sm">
          <SvgUse icon="align-right" />
        </Toggle>
        <Toggle aria-label="Justify" variant="outline" size="sm">
          <SvgUse icon="align-justify" />
        </Toggle>

        <div className="h-4 w-px bg-muted mx-1" />

        <Toggle aria-label="Bullet list" variant="outline" size="sm">
          <SvgUse icon="list" />
        </Toggle>
        <Toggle aria-label="Numbered list" variant="outline" size="sm">
          <SvgUse icon="list-ordered" />
        </Toggle>
      </div>

      <div className="p-2 mt-2">
        <p className="text-muted-foreground text-sm">Start typing your content here...</p>
      </div>
    </div>
  ),
}