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

/**
 * A dropdown menu component that appears on click.
 *
 * ## Props
 * - `Root`: Container for the dropdown menu
 * - `Trigger`: Element that triggers the dropdown menu
 * - `Content`: The dropdown 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/DropdownMenu",
  component: DropdownMenu.Root,
  tags: ["autodocs"],
  parameters: {
    layout: "centered",
  },
} satisfies Meta<typeof DropdownMenu.Root>

export default meta

type Story = StoryObj<typeof meta>

/**
 * Basic dropdown menu with default settings.
 */
export const Default: Story = {
  render: () => (
    <DropdownMenu.Root>
      <DropdownMenu.Trigger>
        <Button variant="solid">Open Menu</Button>
      </DropdownMenu.Trigger>
      <DropdownMenu.Content>
        <DropdownMenu.Item>Profile</DropdownMenu.Item>
        <DropdownMenu.Item>Settings</DropdownMenu.Item>
        <DropdownMenu.Item>Help</DropdownMenu.Item>
        <DropdownMenu.Separator />
        <DropdownMenu.Item>Logout</DropdownMenu.Item>
      </DropdownMenu.Content>
    </DropdownMenu.Root>
  ),
}

/**
 * Dropdown menu with different item types.
 */
export const ItemTypes: Story = {
  render: () => (
    <DropdownMenu.Root>
      <DropdownMenu.Trigger>
        <Button variant="outline">Menu Options</Button>
      </DropdownMenu.Trigger>
      <DropdownMenu.Content>
        <DropdownMenu.Item>Regular Item</DropdownMenu.Item>
        <DropdownMenu.Item disabled>Disabled Item</DropdownMenu.Item>
        <DropdownMenu.Separator />
        <DropdownMenu.CheckboxItem checked>Checkbox Item</DropdownMenu.CheckboxItem>
        <DropdownMenu.CheckboxItem>Unchecked Item</DropdownMenu.CheckboxItem>
        <DropdownMenu.Separator />
        <DropdownMenu.RadioGroup value="option1">
          <DropdownMenu.RadioItem value="option1">Option 1</DropdownMenu.RadioItem>
          <DropdownMenu.RadioItem value="option2">Option 2</DropdownMenu.RadioItem>
          <DropdownMenu.RadioItem value="option3">Option 3</DropdownMenu.RadioItem>
        </DropdownMenu.RadioGroup>
      </DropdownMenu.Content>
    </DropdownMenu.Root>
  ),
}

/**
 * Dropdown menu with submenus.
 */
export const WithSubmenus: Story = {
  render: () => (
    <DropdownMenu.Root>
      <DropdownMenu.Trigger>
        <Button variant="soft" color="blue">
          More Options
        </Button>
      </DropdownMenu.Trigger>
      <DropdownMenu.Content>
        <DropdownMenu.Item>File</DropdownMenu.Item>
        <DropdownMenu.Item>Edit</DropdownMenu.Item>
        <DropdownMenu.Sub>
          <DropdownMenu.SubTrigger>View</DropdownMenu.SubTrigger>
          <DropdownMenu.SubContent>
            <DropdownMenu.Item>Zoom In</DropdownMenu.Item>
            <DropdownMenu.Item>Zoom Out</DropdownMenu.Item>
            <DropdownMenu.Item>Reset Zoom</DropdownMenu.Item>
          </DropdownMenu.SubContent>
        </DropdownMenu.Sub>
        <DropdownMenu.Sub>
          <DropdownMenu.SubTrigger>Tools</DropdownMenu.SubTrigger>
          <DropdownMenu.SubContent>
            <DropdownMenu.Item>Settings</DropdownMenu.Item>
            <DropdownMenu.Item>Preferences</DropdownMenu.Item>
            <DropdownMenu.Sub>
              <DropdownMenu.SubTrigger>Advanced</DropdownMenu.SubTrigger>
              <DropdownMenu.SubContent>
                <DropdownMenu.Item>Developer Tools</DropdownMenu.Item>
                <DropdownMenu.Item>Console</DropdownMenu.Item>
              </DropdownMenu.SubContent>
            </DropdownMenu.Sub>
          </DropdownMenu.SubContent>
        </DropdownMenu.Sub>
        <DropdownMenu.Separator />
        <DropdownMenu.Item>Help</DropdownMenu.Item>
      </DropdownMenu.Content>
    </DropdownMenu.Root>
  ),
}

/**
 * Dropdown menu with labels and separators.
 */
export const WithLabels: Story = {
  render: () => (
    <DropdownMenu.Root>
      <DropdownMenu.Trigger>
        <Button variant="solid" color="green">
          User Menu
        </Button>
      </DropdownMenu.Trigger>
      <DropdownMenu.Content>
        <DropdownMenu.Label>Account</DropdownMenu.Label>
        <DropdownMenu.Item>Profile</DropdownMenu.Item>
        <DropdownMenu.Item>Settings</DropdownMenu.Item>
        <DropdownMenu.Item>Billing</DropdownMenu.Item>
        <DropdownMenu.Separator />
        <DropdownMenu.Label>Actions</DropdownMenu.Label>
        <DropdownMenu.Item>New Project</DropdownMenu.Item>
        <DropdownMenu.Item>Import</DropdownMenu.Item>
        <DropdownMenu.Item>Export</DropdownMenu.Item>
        <DropdownMenu.Separator />
        <DropdownMenu.Label>Preferences</DropdownMenu.Label>
        <DropdownMenu.CheckboxItem checked>Notifications</DropdownMenu.CheckboxItem>
        <DropdownMenu.CheckboxItem checked>Auto-save</DropdownMenu.CheckboxItem>
        <DropdownMenu.CheckboxItem>Dark Mode</DropdownMenu.CheckboxItem>
      </DropdownMenu.Content>
    </DropdownMenu.Root>
  ),
}

/**
 * Dropdown menu with keyboard shortcuts.
 */
export const WithShortcuts: Story = {
  render: () => (
    <DropdownMenu.Root>
      <DropdownMenu.Trigger>
        <Button variant="solid" color="purple">
          Actions
        </Button>
      </DropdownMenu.Trigger>
      <DropdownMenu.Content>
        <DropdownMenu.Item>
          New File
          <div className="ml-auto pl-2 text-xs text-gray-500">⌘N</div>
        </DropdownMenu.Item>
        <DropdownMenu.Item>
          Open File
          <div className="ml-auto pl-2 text-xs text-gray-500">⌘O</div>
        </DropdownMenu.Item>
        <DropdownMenu.Item>
          Save
          <div className="ml-auto pl-2 text-xs text-gray-500">⌘S</div>
        </DropdownMenu.Item>
        <DropdownMenu.Separator />
        <DropdownMenu.Item>
          Undo
          <div className="ml-auto pl-2 text-xs text-gray-500">⌘Z</div>
        </DropdownMenu.Item>
        <DropdownMenu.Item>
          Redo
          <div className="ml-auto pl-2 text-xs text-gray-500">⌘⇧Z</div>
        </DropdownMenu.Item>
        <DropdownMenu.Separator />
        <DropdownMenu.Item>
          Find
          <div className="ml-auto pl-2 text-xs text-gray-500">⌘F</div>
        </DropdownMenu.Item>
        <DropdownMenu.Item>
          Replace
          <div className="ml-auto pl-2 text-xs text-gray-500">⌘H</div>
        </DropdownMenu.Item>
      </DropdownMenu.Content>
    </DropdownMenu.Root>
  ),
}

/**
 * Dropdown menu with icons.
 */
export const WithIcons: Story = {
  render: () => (
    <DropdownMenu.Root>
      <DropdownMenu.Trigger>
        <Button variant="outline" color="orange">
          File Menu
        </Button>
      </DropdownMenu.Trigger>
      <DropdownMenu.Content>
        <DropdownMenu.Item>📄 New File</DropdownMenu.Item>
        <DropdownMenu.Item>📁 Open File</DropdownMenu.Item>
        <DropdownMenu.Item>💾 Save</DropdownMenu.Item>
        <DropdownMenu.Item>💾💾 Save As</DropdownMenu.Item>
        <DropdownMenu.Separator />
        <DropdownMenu.Item>📤 Export</DropdownMenu.Item>
        <DropdownMenu.Item>📥 Import</DropdownMenu.Item>
        <DropdownMenu.Separator />
        <DropdownMenu.Item>⚙️ Settings</DropdownMenu.Item>
        <DropdownMenu.Item>❓ Help</DropdownMenu.Item>
      </DropdownMenu.Content>
    </DropdownMenu.Root>
  ),
}

/**
 * Dropdown menu with radio groups.
 */
export const RadioGroups: Story = {
  render: () => (
    <DropdownMenu.Root>
      <DropdownMenu.Trigger>
        <Button variant="soft" color="red">
          Settings
        </Button>
      </DropdownMenu.Trigger>
      <DropdownMenu.Content>
        <DropdownMenu.Label>Theme</DropdownMenu.Label>
        <DropdownMenu.RadioGroup value="light">
          <DropdownMenu.RadioItem value="light">Light</DropdownMenu.RadioItem>
          <DropdownMenu.RadioItem value="dark">Dark</DropdownMenu.RadioItem>
          <DropdownMenu.RadioItem value="auto">Auto</DropdownMenu.RadioItem>
        </DropdownMenu.RadioGroup>
        <DropdownMenu.Separator />
        <DropdownMenu.Label>Language</DropdownMenu.Label>
        <DropdownMenu.RadioGroup value="en">
          <DropdownMenu.RadioItem value="en">English</DropdownMenu.RadioItem>
          <DropdownMenu.RadioItem value="es">Spanish</DropdownMenu.RadioItem>
          <DropdownMenu.RadioItem value="fr">French</DropdownMenu.RadioItem>
          <DropdownMenu.RadioItem value="de">German</DropdownMenu.RadioItem>
        </DropdownMenu.RadioGroup>
        <DropdownMenu.Separator />
        <DropdownMenu.Label>Font Size</DropdownMenu.Label>
        <DropdownMenu.RadioGroup value="medium">
          <DropdownMenu.RadioItem value="small">Small</DropdownMenu.RadioItem>
          <DropdownMenu.RadioItem value="medium">Medium</DropdownMenu.RadioItem>
          <DropdownMenu.RadioItem value="large">Large</DropdownMenu.RadioItem>
        </DropdownMenu.RadioGroup>
      </DropdownMenu.Content>
    </DropdownMenu.Root>
  ),
}