import { Link } from "@tanstack/react-router";
import { DropdownMenu } from "@cloudflare/kumo/components/dropdown";
import {
  ClockCounterClockwiseIcon,
  DotsThreeIcon,
  DownloadSimpleIcon,
  FilePlusIcon,
  GitBranchIcon,
  MagnifyingGlassIcon,
  PencilSimpleIcon,
  TerminalIcon,
} from "@phosphor-icons/react";
import { Button, buttonClass } from "~/ui/Button";
import { Breadcrumbs } from "./RefNavigation";
import { RefSwitcher } from "./RefSwitcher";

// Kumo menu items put the icon flush against the label.
const MENU_ICON_GAP = "gap-2";

type Props = {
  owner: string;
  repo: string;
  gitRef: { kind: string; name: string };
  path: string;
  branches: string[];
  tags: string[];
  canWrite: boolean;
  containersAllowed: boolean;
};

/** Ref picker and breadcrumbs on the left; frequent actions as buttons, the rest in an overflow menu. */
export function TreeToolbar({ owner, repo, gitRef, path, branches, tags, canWrite, containersAllowed }: Props) {
  const onBranch = gitRef.kind === "branch";
  const refPath = path ? `${gitRef.name}/${path}` : gitRef.name;
  const editParams = { owner, repo, _splat: gitRef.name };
  const menuLinks = [
    {
      label: "Open in editor",
      shortcut: ".",
      icon: <PencilSimpleIcon />,
      show: canWrite && onBranch,
      link: <Link to="/$owner/$repo/edit/$" params={editParams} />,
    },
    {
      label: "Open in container",
      icon: <TerminalIcon />,
      show: containersAllowed && onBranch,
      link: <Link to="/$owner/$repo/edit/$" params={editParams} search={{ container: 1 }} />,
    },
    {
      label: "Search code",
      icon: <MagnifyingGlassIcon />,
      show: true,
      link: <Link to="/$owner/$repo/search" params={{ owner, repo }} />,
    },
    {
      label: `${branches.length} ${branches.length === 1 ? "branch" : "branches"}`,
      icon: <GitBranchIcon />,
      show: true,
      link: <Link to="/$owner/$repo/branches" params={{ owner, repo }} />,
    },
  ];
  return (
    <div className="flex flex-wrap items-center gap-x-3 gap-y-2">
      <div className="flex min-w-0 flex-1 items-center gap-3">
        <RefSwitcher
          owner={owner}
          repo={repo}
          current={gitRef.name}
          branches={branches}
          tags={tags}
          path={path}
          mode="tree"
        />
        <div className="min-w-0 truncate">
          <Breadcrumbs owner={owner} repo={repo} gitRef={gitRef.name} path={path} />
        </div>
      </div>
      <div className="flex shrink-0 items-center gap-1.5">
        <Link
          to="/$owner/$repo/find/$"
          params={{ owner, repo, _splat: gitRef.name }}
          className={buttonClass("ghost", "sm")}
        >
          <MagnifyingGlassIcon aria-hidden />
          <span className="hidden sm:inline">Go to file</span>
          <span className="sr-only sm:hidden">Go to file</span>
        </Link>
        <Link
          to="/$owner/$repo/commits/$"
          params={{ owner, repo, _splat: refPath }}
          className={buttonClass("ghost", "sm")}
        >
          <ClockCounterClockwiseIcon aria-hidden />
          <span className="hidden sm:inline">History</span>
          <span className="sr-only sm:hidden">History</span>
        </Link>
        {canWrite && onBranch && (
          <Link
            to="/$owner/$repo/new/$"
            params={{ owner, repo, _splat: refPath }}
            className={buttonClass("secondary", "sm")}
          >
            <FilePlusIcon aria-hidden />
            Add file
          </Link>
        )}
        <DropdownMenu>
          <DropdownMenu.Trigger render={<Button size="sm" aria-label="More actions" />}>
            <DotsThreeIcon aria-hidden weight="bold" />
          </DropdownMenu.Trigger>
          <DropdownMenu.Content align="end" className="w-56">
            {menuLinks
              .filter((item) => item.show)
              .map((item) => (
                <DropdownMenu.LinkItem
                  key={item.label}
                  closeOnClick
                  icon={item.icon}
                  render={item.link}
                  className={MENU_ICON_GAP}
                >
                  {item.label}
                  {item.shortcut && <DropdownMenu.Shortcut>{item.shortcut}</DropdownMenu.Shortcut>}
                </DropdownMenu.LinkItem>
              ))}
            <DropdownMenu.Separator />
            <DropdownMenu.LinkItem
              closeOnClick
              icon={<DownloadSimpleIcon />}
              className={MENU_ICON_GAP}
              href={`/${owner}/${repo}/archive/${gitRef.name}.tar.gz`}
            >
              Download .tar.gz
            </DropdownMenu.LinkItem>
          </DropdownMenu.Content>
        </DropdownMenu>
      </div>
    </div>
  );
}