import { kbdPropDefs } from "@radix-ui/themes/props"
import type { Meta, StoryObj } from "@storybook/react"
import { Kbd } from "./Kbd"

const meta = {
  title: "base/communication/Kbd",
  component: Kbd,
  tags: ["autodocs"],
  argTypes: {
    children: {
      control: "text",
      description: "The key or key combination to display",
    },
    size: {
      control: "select",
      options: kbdPropDefs.size.values,
      description: "The size of the keyboard element",
    },
  },
  parameters: {
    layout: "centered",
  },
  args: {
    children: "⌘K",
  },
} satisfies Meta<typeof Kbd>

export default meta

type Story = StoryObj<typeof meta>

/**
 * Default keyboard shortcut display.
 */
export const Default: Story = {}

/**
 * Different sizes of keyboard elements.
 */
export const Sizes: Story = {
  render: () => (
    <div className="flex items-center gap-4">
      <Kbd size="1">⌘K</Kbd>
      <Kbd size="2">⌘K</Kbd>
      <Kbd size="3">⌘K</Kbd>
      <Kbd size="4">⌘K</Kbd>
      <Kbd size="5">⌘K</Kbd>
    </div>
  ),
}

/**
 * Common keyboard shortcuts.
 */
export const CommonShortcuts: Story = {
  render: () => (
    <div className="space-y-2">
      <div className="flex items-center gap-2">
        <span className="text-sm">Search:</span>
        <Kbd>⌘K</Kbd>
      </div>
      <div className="flex items-center gap-2">
        <span className="text-sm">Save:</span>
        <Kbd>⌘S</Kbd>
      </div>
      <div className="flex items-center gap-2">
        <span className="text-sm">Copy:</span>
        <Kbd>⌘C</Kbd>
      </div>
      <div className="flex items-center gap-2">
        <span className="text-sm">Paste:</span>
        <Kbd>⌘V</Kbd>
      </div>
      <div className="flex items-center gap-2">
        <span className="text-sm">Undo:</span>
        <Kbd>⌘Z</Kbd>
      </div>
      <div className="flex items-center gap-2">
        <span className="text-sm">Redo:</span>
        <Kbd>⌘⇧Z</Kbd>
      </div>
    </div>
  ),
}

/**
 * Key combinations with multiple keys.
 */
export const KeyCombinations: Story = {
  render: () => (
    <div className="space-y-2">
      <div className="flex items-center gap-2">
        <span className="text-sm">Force quit:</span>
        <Kbd>⌘⌥Esc</Kbd>
      </div>
      <div className="flex items-center gap-2">
        <span className="text-sm">Screenshot:</span>
        <Kbd>⌘⇧3</Kbd>
      </div>
      <div className="flex items-center gap-2">
        <span className="text-sm">Window screenshot:</span>
        <Kbd>⌘⇧4</Kbd>
      </div>
      <div className="flex items-center gap-2">
        <span className="text-sm">Switch apps:</span>
        <Kbd>⌘Tab</Kbd>
      </div>
      <div className="flex items-center gap-2">
        <span className="text-sm">Close window:</span>
        <Kbd>⌘W</Kbd>
      </div>
      <div className="flex items-center gap-2">
        <span className="text-sm">Quit app:</span>
        <Kbd>⌘Q</Kbd>
      </div>
    </div>
  ),
}

/**
 * Windows keyboard shortcuts.
 */
export const WindowsShortcuts: Story = {
  render: () => (
    <div className="space-y-2">
      <div className="flex items-center gap-2">
        <span className="text-sm">Search:</span>
        <Kbd>⊞S</Kbd>
      </div>
      <div className="flex items-center gap-2">
        <span className="text-sm">Task Manager:</span>
        <Kbd>Ctrl⇧Esc</Kbd>
      </div>
      <div className="flex items-center gap-2">
        <span className="text-sm">Screenshot:</span>
        <Kbd>⊞⇧S</Kbd>
      </div>
      <div className="flex items-center gap-2">
        <span className="text-sm">Switch apps:</span>
        <Kbd>AltTab</Kbd>
      </div>
      <div className="flex items-center gap-2">
        <span className="text-sm">Close window:</span>
        <Kbd>AltF4</Kbd>
      </div>
      <div className="flex items-center gap-2">
        <span className="text-sm">Lock screen:</span>
        <Kbd>⊞L</Kbd>
      </div>
    </div>
  ),
}

/**
 * Linux keyboard shortcuts.
 */
export const LinuxShortcuts: Story = {
  render: () => (
    <div className="space-y-2">
      <div className="flex items-center gap-2">
        <span className="text-sm">Terminal:</span>
        <Kbd>CtrlAltT</Kbd>
      </div>
      <div className="flex items-center gap-2">
        <span className="text-sm">Switch workspace:</span>
        <Kbd>CtrlAlt←</Kbd>
      </div>
      <div className="flex items-center gap-2">
        <span className="text-sm">Screenshot:</span>
        <Kbd>PrtScn</Kbd>
      </div>
      <div className="flex items-center gap-2">
        <span className="text-sm">Window screenshot:</span>
        <Kbd>AltPrtScn</Kbd>
      </div>
      <div className="flex items-center gap-2">
        <span className="text-sm">Lock screen:</span>
        <Kbd>CtrlAltL</Kbd>
      </div>
      <div className="flex items-center gap-2">
        <span className="text-sm">Logout:</span>
        <Kbd>CtrlAltDel</Kbd>
      </div>
    </div>
  ),
}

/**
 * Gaming keyboard shortcuts.
 */
export const GamingShortcuts: Story = {
  render: () => (
    <div className="space-y-2">
      <div className="flex items-center gap-2">
        <span className="text-sm">Move forward:</span>
        <Kbd>W</Kbd>
      </div>
      <div className="flex items-center gap-2">
        <span className="text-sm">Move backward:</span>
        <Kbd>S</Kbd>
      </div>
      <div className="flex items-center gap-2">
        <span className="text-sm">Move left:</span>
        <Kbd>A</Kbd>
      </div>
      <div className="flex items-center gap-2">
        <span className="text-sm">Move right:</span>
        <Kbd>D</Kbd>
      </div>
      <div className="flex items-center gap-2">
        <span className="text-sm">Jump:</span>
        <Kbd>Space</Kbd>
      </div>
      <div className="flex items-center gap-2">
        <span className="text-sm">Sprint:</span>
        <Kbd>Shift</Kbd>
      </div>
      <div className="flex items-center gap-2">
        <span className="text-sm">Crouch:</span>
        <Kbd>Ctrl</Kbd>
      </div>
      <div className="flex items-center gap-2">
        <span className="text-sm">Reload:</span>
        <Kbd>R</Kbd>
      </div>
    </div>
  ),
}

/**
 * Function keys.
 */
export const FunctionKeys: Story = {
  render: () => (
    <div className="grid grid-cols-2 gap-4">
      <div className="space-y-2">
        <div className="flex items-center gap-2">
          <span className="text-sm">Help:</span>
          <Kbd>F1</Kbd>
        </div>
        <div className="flex items-center gap-2">
          <span className="text-sm">Rename:</span>
          <Kbd>F2</Kbd>
        </div>
        <div className="flex items-center gap-2">
          <span className="text-sm">Search:</span>
          <Kbd>F3</Kbd>
        </div>
        <div className="flex items-center gap-2">
          <span className="text-sm">Address bar:</span>
          <Kbd>F4</Kbd>
        </div>
        <div className="flex items-center gap-2">
          <span className="text-sm">Refresh:</span>
          <Kbd>F5</Kbd>
        </div>
      </div>
      <div className="space-y-2">
        <div className="flex items-center gap-2">
          <span className="text-sm">Spell check:</span>
          <Kbd>F7</Kbd>
        </div>
        <div className="flex items-center gap-2">
          <span className="text-sm">Full screen:</span>
          <Kbd>F11</Kbd>
        </div>
        <div className="flex items-center gap-2">
          <span className="text-sm">Save as:</span>
          <Kbd>F12</Kbd>
        </div>
        <div className="flex items-center gap-2">
          <span className="text-sm">Volume up:</span>
          <Kbd>F10</Kbd>
        </div>
        <div className="flex items-center gap-2">
          <span className="text-sm">Volume down:</span>
          <Kbd>F9</Kbd>
        </div>
      </div>
    </div>
  ),
}

/**
 * Inline keyboard shortcuts in text.
 */
export const InlineText: Story = {
  render: () => (
    <div className="space-y-4 text-sm">
      <p>
        Press <Kbd>⌘K</Kbd> to open the search dialog, or use <Kbd>⌘⇧P</Kbd> to access the command
        palette.
      </p>
      <p>
        To save your work, press <Kbd>⌘S</Kbd>. For a quick undo, use <Kbd>⌘Z</Kbd>.
      </p>
      <p>
        Navigate between tabs using <Kbd>⌘⇧[</Kbd> and <Kbd>⌘⇧]</Kbd>.
      </p>
      <p>
        To close the current window, press <Kbd>⌘W</Kbd>, or <Kbd>⌘Q</Kbd> to quit the application
        entirely.
      </p>
    </div>
  ),
}

/**
 * Different sizes in context.
 */
export const SizeContext: Story = {
  render: () => (
    <div className="space-y-4">
      <div>
        <h4 className="text-sm font-medium mb-2">Small (size="1")</h4>
        <p className="text-xs">
          Press <Kbd size="1">⌘K</Kbd> to search. Use <Kbd size="1">⌘S</Kbd> to save.
        </p>
      </div>
      <div>
        <h4 className="text-sm font-medium mb-2">Medium (size="5")</h4>
        <p className="text-sm">
          Press <Kbd size="5">⌘K</Kbd> to search. Use <Kbd size="5">⌘S</Kbd> to save.
        </p>
      </div>
      <div>
        <h4 className="text-sm font-medium mb-2">Large (size="9")</h4>
        <p className="text-base">
          Press <Kbd size="9">⌘K</Kbd> to search. Use <Kbd size="9">⌘S</Kbd> to save.
        </p>
      </div>
    </div>
  ),
}