"use client"

import { DocsEditMenu, type DocsEditMenuActions, type DocsEditMenuState } from "@/components/drive/richtext/docs-edit-menu"
import { DocsFileMenu, type DocsFileMenuActions } from "@/components/drive/richtext/docs-file-menu"
import { DocsViewMenu, type DocsViewMenuActions, type DocsViewMenuState } from "@/components/drive/richtext/docs-view-menu"
import { DOCS_MENUBAR_CONTENT_PROPS } from "@/components/drive/richtext/docs-menubar-props"
import {
  Menubar,
  MenubarContent,
  MenubarItem,
  MenubarMenu,
  MenubarTrigger,
} from "@/components/ui/menubar"
import { cn } from "@/lib/utils"

const OTHER_MENU_LABELS = ["Insertion", "Format", "Outils", "Aide"] as const

export function DocsMenubar({
  viewMenuActions,
  viewMenuState,
  viewMenuDisabled,
  fileMenuActions,
  fileMenuDisabled,
  editMenuActions,
  editMenuState,
  editMenuDisabled,
  className,
}: {
  viewMenuActions?: DocsViewMenuActions
  viewMenuState?: DocsViewMenuState
  viewMenuDisabled?: boolean
  fileMenuActions?: DocsFileMenuActions
  fileMenuDisabled?: boolean
  editMenuActions?: DocsEditMenuActions
  editMenuState?: DocsEditMenuState
  editMenuDisabled?: boolean
  className?: string
}) {
  return (
    <Menubar
      className={cn(
        "docs-menubar h-auto gap-0 border-0 bg-transparent p-0 shadow-none",
        className
      )}
    >
      {fileMenuActions ? (
        <DocsFileMenu actions={fileMenuActions} disabled={fileMenuDisabled} />
      ) : (
        <MenubarMenu>
          <MenubarTrigger className="docs-menu-trigger">Fichier</MenubarTrigger>
          <MenubarContent {...DOCS_MENUBAR_CONTENT_PROPS} data-docs-menu-surface>
            <MenubarItem disabled className="text-muted-foreground">
              Bientôt disponible
            </MenubarItem>
          </MenubarContent>
        </MenubarMenu>
      )}

      {editMenuActions && editMenuState ? (
        <DocsEditMenu
          actions={editMenuActions}
          state={editMenuState}
          disabled={editMenuDisabled}
        />
      ) : (
        <MenubarMenu>
          <MenubarTrigger className="docs-menu-trigger">Édition</MenubarTrigger>
          <MenubarContent {...DOCS_MENUBAR_CONTENT_PROPS} data-docs-menu-surface>
            <MenubarItem disabled className="text-muted-foreground">
              Bientôt disponible
            </MenubarItem>
          </MenubarContent>
        </MenubarMenu>
      )}

      {viewMenuActions && viewMenuState ? (
        <DocsViewMenu
          actions={viewMenuActions}
          state={viewMenuState}
          disabled={viewMenuDisabled}
        />
      ) : (
        <MenubarMenu>
          <MenubarTrigger className="docs-menu-trigger">Affichage</MenubarTrigger>
          <MenubarContent {...DOCS_MENUBAR_CONTENT_PROPS} data-docs-menu-surface>
            <MenubarItem disabled className="text-muted-foreground">
              Bientôt disponible
            </MenubarItem>
          </MenubarContent>
        </MenubarMenu>
      )}

      {OTHER_MENU_LABELS.map((label) => (
          <MenubarMenu key={label}>
            <MenubarTrigger className="docs-menu-trigger">{label}</MenubarTrigger>
            <MenubarContent
              {...DOCS_MENUBAR_CONTENT_PROPS}
              className="docs-menu-content overflow-visible"
              data-docs-menu-surface
            >
              <MenubarItem disabled className="text-muted-foreground">
                Bientôt disponible
              </MenubarItem>
            </MenubarContent>
          </MenubarMenu>
      ))}
    </Menubar>
  )
}