import type { Meta, StoryObj } from "@storybook/react"
import { Button } from "../../action/button"
import { ContextMenu } from "./ContextMenu"

/**
 * A context menu component that appears on right-click.
 *
 * ## Props
 * - `Root`: Container for the context menu
 * - `Trigger`: Element that triggers the context menu
 * - `Content`: The context menu content
 * - `Item`: Individual menu item
 * - `Label`: Section label
 * - `Separator`: Visual separator
 * - `Sub`: Submenu container
 * - `SubTrigger`: Submenu trigger
 * - `SubContent`: Submenu content
 * - `CheckboxItem`: Checkbox menu item
 * - `RadioGroup`: Radio group container
 * - `RadioItem`: Radio menu item
 */
const meta = {
  title: "base/selection/ContextMenu",
  component: ContextMenu.Root,
  tags: ["autodocs"],
  parameters: {
    layout: "centered",
  },
} satisfies Meta<typeof ContextMenu.Root>

export default meta

type Story = StoryObj<typeof meta>

/**
 * Basic context menu with default settings.
 */
export const Default: Story = {
  render: () => (
    <ContextMenu.Root>
      <ContextMenu.Trigger>
        <div className="w-64 h-32 bg-gray-100 border-2 border-dashed border-gray-300 rounded-lg flex items-center justify-center cursor-context-menu">
          Right-click here
        </div>
      </ContextMenu.Trigger>
      <ContextMenu.Content>
        <ContextMenu.Item>Copy</ContextMenu.Item>
        <ContextMenu.Item>Cut</ContextMenu.Item>
        <ContextMenu.Item>Paste</ContextMenu.Item>
        <ContextMenu.Separator />
        <ContextMenu.Item>Delete</ContextMenu.Item>
      </ContextMenu.Content>
    </ContextMenu.Root>
  ),
}

/**
 * Context menu with different item types.
 */
export const ItemTypes: Story = {
  render: () => (
    <ContextMenu.Root>
      <ContextMenu.Trigger>
        <Button variant="solid">Right-click me</Button>
      </ContextMenu.Trigger>
      <ContextMenu.Content>
        <ContextMenu.Item>Regular Item</ContextMenu.Item>
        <ContextMenu.Item disabled>Disabled Item</ContextMenu.Item>
        <ContextMenu.Separator />
        <ContextMenu.CheckboxItem checked>Checkbox Item</ContextMenu.CheckboxItem>
        <ContextMenu.CheckboxItem>Unchecked Item</ContextMenu.CheckboxItem>
        <ContextMenu.Separator />
        <ContextMenu.RadioGroup value="option1">
          <ContextMenu.RadioItem value="option1">Option 1</ContextMenu.RadioItem>
          <ContextMenu.RadioItem value="option2">Option 2</ContextMenu.RadioItem>
          <ContextMenu.RadioItem value="option3">Option 3</ContextMenu.RadioItem>
        </ContextMenu.RadioGroup>
      </ContextMenu.Content>
    </ContextMenu.Root>
  ),
}

/**
 * Context menu with submenus.
 */
export const WithSubmenus: Story = {
  render: () => (
    <ContextMenu.Root>
      <ContextMenu.Trigger>
        <div className="w-64 h-32 bg-blue-100 border-2 border-dashed border-blue-300 rounded-lg flex items-center justify-center cursor-context-menu">
          Right-click for submenus
        </div>
      </ContextMenu.Trigger>
      <ContextMenu.Content>
        <ContextMenu.Item>File</ContextMenu.Item>
        <ContextMenu.Item>Edit</ContextMenu.Item>
        <ContextMenu.Sub>
          <ContextMenu.SubTrigger>View</ContextMenu.SubTrigger>
          <ContextMenu.SubContent>
            <ContextMenu.Item>Zoom In</ContextMenu.Item>
            <ContextMenu.Item>Zoom Out</ContextMenu.Item>
            <ContextMenu.Item>Reset Zoom</ContextMenu.Item>
          </ContextMenu.SubContent>
        </ContextMenu.Sub>
        <ContextMenu.Sub>
          <ContextMenu.SubTrigger>Tools</ContextMenu.SubTrigger>
          <ContextMenu.SubContent>
            <ContextMenu.Item>Settings</ContextMenu.Item>
            <ContextMenu.Item>Preferences</ContextMenu.Item>
            <ContextMenu.Sub>
              <ContextMenu.SubTrigger>Advanced</ContextMenu.SubTrigger>
              <ContextMenu.SubContent>
                <ContextMenu.Item>Developer Tools</ContextMenu.Item>
                <ContextMenu.Item>Console</ContextMenu.Item>
              </ContextMenu.SubContent>
            </ContextMenu.Sub>
          </ContextMenu.SubContent>
        </ContextMenu.Sub>
        <ContextMenu.Separator />
        <ContextMenu.Item>Help</ContextMenu.Item>
      </ContextMenu.Content>
    </ContextMenu.Root>
  ),
}

/**
 * Context menu with labels and separators.
 */
export const WithLabels: Story = {
  render: () => (
    <ContextMenu.Root>
      <ContextMenu.Trigger>
        <Button variant="outline">Right-click me</Button>
      </ContextMenu.Trigger>
      <ContextMenu.Content>
        <ContextMenu.Label>File Operations</ContextMenu.Label>
        <ContextMenu.Item>New</ContextMenu.Item>
        <ContextMenu.Item>Open</ContextMenu.Item>
        <ContextMenu.Item>Save</ContextMenu.Item>
        <ContextMenu.Separator />
        <ContextMenu.Label>Edit Operations</ContextMenu.Label>
        <ContextMenu.Item>Undo</ContextMenu.Item>
        <ContextMenu.Item>Redo</ContextMenu.Item>
        <ContextMenu.Separator />
        <ContextMenu.Label>View Options</ContextMenu.Label>
        <ContextMenu.CheckboxItem checked>Show Toolbar</ContextMenu.CheckboxItem>
        <ContextMenu.CheckboxItem checked>Show Status Bar</ContextMenu.CheckboxItem>
        <ContextMenu.CheckboxItem>Show Sidebar</ContextMenu.CheckboxItem>
      </ContextMenu.Content>
    </ContextMenu.Root>
  ),
}

/**
 * Context menu with keyboard shortcuts.
 */
export const WithShortcuts: Story = {
  render: () => (
    <ContextMenu.Root>
      <ContextMenu.Trigger>
        <div className="w-64 h-32 bg-green-100 border-2 border-dashed border-green-300 rounded-lg flex items-center justify-center cursor-context-menu">
          Right-click for shortcuts
        </div>
      </ContextMenu.Trigger>
      <ContextMenu.Content>
        <ContextMenu.Item>
          Copy
          <div className="ml-auto pl-2 text-xs text-gray-500">⌘C</div>
        </ContextMenu.Item>
        <ContextMenu.Item>
          Cut
          <div className="ml-auto pl-2 text-xs text-gray-500">⌘X</div>
        </ContextMenu.Item>
        <ContextMenu.Item>
          Paste
          <div className="ml-auto pl-2 text-xs text-gray-500">⌘V</div>
        </ContextMenu.Item>
        <ContextMenu.Separator />
        <ContextMenu.Item>
          Undo
          <div className="ml-auto pl-2 text-xs text-gray-500">⌘Z</div>
        </ContextMenu.Item>
        <ContextMenu.Item>
          Redo
          <div className="ml-auto pl-2 text-xs text-gray-500">⌘⇧Z</div>
        </ContextMenu.Item>
        <ContextMenu.Separator />
        <ContextMenu.Item>
          Select All
          <div className="ml-auto pl-2 text-xs text-gray-500">⌘A</div>
        </ContextMenu.Item>
      </ContextMenu.Content>
    </ContextMenu.Root>
  ),
}

/**
 * Context menu with icons.
 */
export const WithIcons: Story = {
  render: () => (
    <ContextMenu.Root>
      <ContextMenu.Trigger>
        <Button variant="soft" color="purple">
          Right-click me
        </Button>
      </ContextMenu.Trigger>
      <ContextMenu.Content>
        <ContextMenu.Item>📄 New File</ContextMenu.Item>
        <ContextMenu.Item>📁 Open File</ContextMenu.Item>
        <ContextMenu.Item>💾 Save</ContextMenu.Item>
        <ContextMenu.Separator />
        <ContextMenu.Item>✂️ Cut</ContextMenu.Item>
        <ContextMenu.Item>📋 Copy</ContextMenu.Item>
        <ContextMenu.Item>📌 Paste</ContextMenu.Item>
        <ContextMenu.Separator />
        <ContextMenu.Item>🗑️ Delete</ContextMenu.Item>
      </ContextMenu.Content>
    </ContextMenu.Root>
  ),
}

/**
 * Context menu with radio groups.
 */
export const RadioGroups: Story = {
  render: () => (
    <ContextMenu.Root>
      <ContextMenu.Trigger>
        <div className="w-64 h-32 bg-yellow-100 border-2 border-dashed border-yellow-300 rounded-lg flex items-center justify-center cursor-context-menu">
          Right-click for radio options
        </div>
      </ContextMenu.Trigger>
      <ContextMenu.Content>
        <ContextMenu.Label>Theme</ContextMenu.Label>
        <ContextMenu.RadioGroup value="light">
          <ContextMenu.RadioItem value="light">Light</ContextMenu.RadioItem>
          <ContextMenu.RadioItem value="dark">Dark</ContextMenu.RadioItem>
          <ContextMenu.RadioItem value="auto">Auto</ContextMenu.RadioItem>
        </ContextMenu.RadioGroup>
        <ContextMenu.Separator />
        <ContextMenu.Label>Language</ContextMenu.Label>
        <ContextMenu.RadioGroup value="en">
          <ContextMenu.RadioItem value="en">English</ContextMenu.RadioItem>
          <ContextMenu.RadioItem value="es">Spanish</ContextMenu.RadioItem>
          <ContextMenu.RadioItem value="fr">French</ContextMenu.RadioItem>
        </ContextMenu.RadioGroup>
      </ContextMenu.Content>
    </ContextMenu.Root>
  ),
}