"use client";

import { useRouter } from "next/navigation";
import { Button, Menu, MenuItem } from "@unlocalhosted/metalui";
import { encodePath } from "@/lib/format";
import { ChevronDownIcon, PlusIcon, UploadIcon } from "./icons";

/** "Add file": a MetalUI menu of the two ways to add one, each navigating to its page. */
export function AddFileMenu({ base, branch, path }: { base: string; branch: string; path: string }) {
  const router = useRouter();
  const suffix = `${encodePath(branch)}${path ? `/${encodePath(path)}` : ""}`;
  return (
    <Menu
      align="end"
      trigger={
        <Button icon={<PlusIcon />} aria-label="Add file">
          <span className="hidden sm:inline">Add File</span>
          <span aria-hidden className="-mr-1 inline-grid text-ink3">
            <ChevronDownIcon width={12} height={12} />
          </span>
        </Button>
      }
    >
      <MenuItem icon={<PlusIcon />} onSelect={() => router.push(`${base}/new/${suffix}`)}>
        Create New File
      </MenuItem>
      <MenuItem icon={<UploadIcon />} onSelect={() => router.push(`${base}/upload/${suffix}`)}>
        Upload Files
      </MenuItem>
    </Menu>
  );
}