"use client"

import type { ReactNode } from "react"
import {
  ClipboardPaste,
  ClipboardX,
  Copy,
  Redo2,
  ScanSearch,
  Scissors,
  SquareDashed,
  Trash2,
  Undo2,
} from "lucide-react"
import {
  MenubarContent,
  MenubarItem,
  MenubarMenu,
  MenubarSeparator,
  MenubarTrigger,
} from "@/components/ui/menubar"
import { DocsMenuShortcut } from "@/components/drive/richtext/docs-menu-shortcut"
import { DOCS_MENUBAR_CONTENT_PROPS } from "@/components/drive/richtext/docs-menubar-props"

export type DocsEditMenuActions = {
  onUndo: () => void
  onRedo: () => void
  onCut: () => void
  onCopy: () => void
  onPaste: () => void
  onPastePlain: () => void
  onSelectAll: () => void
  onDelete: () => void
  onFindReplace: () => void
}

export type DocsEditMenuState = {
  canUndo: boolean
  canRedo: boolean
}

function MenuIcon({ children }: { children: ReactNode }) {
  return <span className="docs-menu-item-icon">{children}</span>
}

export function DocsEditMenu({
  actions,
  state,
  disabled,
}: {
  actions: DocsEditMenuActions
  state: DocsEditMenuState
  disabled?: boolean
}) {
  return (
    <MenubarMenu>
      <MenubarTrigger className="docs-menu-trigger">Édition</MenubarTrigger>
      <MenubarContent
        {...DOCS_MENUBAR_CONTENT_PROPS}
        className="docs-menu-content min-w-[300px] overflow-visible"
        data-docs-menu-surface
      >
        <MenubarItem
          className="docs-menu-item"
          disabled={disabled || !state.canUndo}
          onClick={actions.onUndo}
        >
          <MenuIcon>
            <Undo2 className="size-4" />
          </MenuIcon>
          Annuler
          <DocsMenuShortcut shortcutId="edit.undo" />
        </MenubarItem>
        <MenubarItem
          className="docs-menu-item"
          disabled={disabled || !state.canRedo}
          onClick={actions.onRedo}
        >
          <MenuIcon>
            <Redo2 className="size-4" />
          </MenuIcon>
          Rétablir
          <DocsMenuShortcut shortcutId="edit.redo" />
        </MenubarItem>

        <MenubarSeparator />

        <MenubarItem className="docs-menu-item" disabled={disabled} onClick={actions.onCut}>
          <MenuIcon>
            <Scissors className="size-4" />
          </MenuIcon>
          Couper
          <DocsMenuShortcut shortcutId="edit.cut" />
        </MenubarItem>
        <MenubarItem className="docs-menu-item" disabled={disabled} onClick={actions.onCopy}>
          <MenuIcon>
            <Copy className="size-4" />
          </MenuIcon>
          Copier
          <DocsMenuShortcut shortcutId="edit.copy" />
        </MenubarItem>
        <MenubarItem className="docs-menu-item" disabled={disabled} onClick={actions.onPaste}>
          <MenuIcon>
            <ClipboardPaste className="size-4" />
          </MenuIcon>
          Coller
          <DocsMenuShortcut shortcutId="edit.paste" />
        </MenubarItem>
        <MenubarItem className="docs-menu-item" disabled={disabled} onClick={actions.onPastePlain}>
          <MenuIcon>
            <ClipboardX className="size-4" />
          </MenuIcon>
          Coller sans la mise en forme
          <DocsMenuShortcut shortcutId="edit.pastePlain" />
        </MenubarItem>

        <MenubarSeparator />

        <MenubarItem className="docs-menu-item" disabled={disabled} onClick={actions.onSelectAll}>
          <MenuIcon>
            <SquareDashed className="size-4" />
          </MenuIcon>
          Tout sélectionner
          <DocsMenuShortcut shortcutId="edit.selectAll" />
        </MenubarItem>
        <MenubarItem className="docs-menu-item" disabled={disabled} onClick={actions.onDelete}>
          <MenuIcon>
            <Trash2 className="size-4" />
          </MenuIcon>
          Supprimer
        </MenubarItem>

        <MenubarSeparator />

        <MenubarItem className="docs-menu-item" disabled={disabled} onClick={actions.onFindReplace}>
          <MenuIcon>
            <ScanSearch className="size-4" />
          </MenuIcon>
          Rechercher et remplacer
          <DocsMenuShortcut shortcutId="edit.findReplace" />
        </MenubarItem>
      </MenubarContent>
    </MenubarMenu>
  )
}