"use client";

import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuSeparator,
  DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu";
import type { Position } from "@/types/canvas";

type Props = {
  position: Position | null;
  isMac: boolean;
  videoUploading: boolean;
  onClose: () => void;
  onUploadImage: () => void;
  onUploadVideo: () => void;
  onPaste: () => void;
  onZoomIn: () => void;
  onZoomOut: () => void;
  onFitAll: () => void;
  onResetZoom: () => void;
};

export function CanvasBlankContextMenu({
  position,
  isMac,
  videoUploading,
  onClose,
  onUploadImage,
  onUploadVideo,
  onPaste,
  onZoomIn,
  onZoomOut,
  onFitAll,
  onResetZoom,
}: Props) {
  const modifier = isMac ? "⌘" : "Ctrl+";
  const itemClass =
    "h-8 cursor-pointer justify-between whitespace-nowrap rounded-[5px] px-0 text-[14px] font-normal focus:bg-[#f5f5f5] dark:focus:bg-white/10";
  const shortcut = (label: string) => (
    <span className="ml-2 whitespace-nowrap text-[13px] text-[#aaa]">
      {label}
    </span>
  );
  return (
    <DropdownMenu
      modal={false}
      open={position !== null}
      onOpenChange={(open) => {
        if (!open) onClose();
      }}
    >
      <DropdownMenuTrigger asChild>
        <button
          aria-hidden="true"
          tabIndex={-1}
          data-canvas-no-drag="true"
          className="pointer-events-none fixed h-px w-px opacity-0"
          style={{ left: position?.x ?? 0, top: position?.y ?? 0 }}
          type="button"
        />
      </DropdownMenuTrigger>
      <DropdownMenuContent
        aria-label="画布右键菜单"
        align="start"
        sideOffset={0}
        collisionPadding={8}
        data-canvas-blank-menu="true"
        data-canvas-no-drag="true"
        className="z-[10005] w-[200px] rounded-[12px] border-[#ededed] bg-white px-3 py-[5px] text-[#242424] shadow-[0_8px_20px_rgba(0,0,0,0.06)] ring-0 dark:border-white/10 dark:bg-zinc-900 dark:text-white"
        style={{
          fontFamily:
            'Arial, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif',
        }}
        onCloseAutoFocus={(event) => event.preventDefault()}
        onClick={(event) => event.stopPropagation()}
        onMouseDown={(event) => event.stopPropagation()}
        onContextMenu={(event) => {
          event.preventDefault();
          event.stopPropagation();
        }}
      >
        <DropdownMenuItem className={itemClass} onSelect={onUploadImage}>
          上传图片
        </DropdownMenuItem>
        <DropdownMenuItem
          className={itemClass}
          disabled={videoUploading}
          onSelect={onUploadVideo}
        >
          上传视频
        </DropdownMenuItem>
        <DropdownMenuSeparator className="mx-0 my-[6.5px] bg-[#ededed] dark:bg-white/10" />
        <DropdownMenuItem className={itemClass} onSelect={onPaste}>
          粘贴{shortcut(`${modifier}V`)}
        </DropdownMenuItem>
        <DropdownMenuSeparator className="mx-0 my-[6.5px] bg-[#ededed] dark:bg-white/10" />
        <DropdownMenuItem className={itemClass} onSelect={onZoomIn}>
          放大{shortcut(`${modifier}+`)}
        </DropdownMenuItem>
        <DropdownMenuItem className={itemClass} onSelect={onZoomOut}>
          缩小{shortcut(`${modifier}-`)}
        </DropdownMenuItem>
        <DropdownMenuItem className={itemClass} onSelect={onFitAll}>
          显示画布所有元素{shortcut(isMac ? "⇧1" : "Shift+1")}
        </DropdownMenuItem>
        <DropdownMenuItem className={itemClass} onSelect={onResetZoom}>
          缩放至100%{shortcut(`${modifier}0`)}
        </DropdownMenuItem>
      </DropdownMenuContent>
    </DropdownMenu>
  );
}