/**
 * @file The git bar's "Branches & tags" icon button, which owns the Branches
 * panel (`BranchManager`) it opens — portalled to `document.body`, so no
 * scrolling or transformed ancestor of the Changes panel can clip it. The
 * panel closes when the bar starts showing another workspace.
 * @author Nguyễn Ngọc Trí Vĩ <vinnt@smartgift.vn>
 */

import { useState } from "react";
import { createPortal } from "react-dom";
import { useTranslation } from "react-i18next";
import { Tags } from "lucide-react";
import type { GitSource } from "../../../lib/api";
import { BranchManager } from "./BranchManager";

export function BranchesButton({
  laneId,
  session,
  source,
  dirty,
  merging,
  disabled,
  onChanged,
}: {
  laneId: number;
  session?: string;
  source?: GitSource;
  dirty: number;
  merging: boolean;
  disabled?: boolean;
  onChanged: () => void;
}) {
  const { t } = useTranslation(["gitRefs"]);
  const [open, setOpen] = useState(false);
  const [shown, setShown] = useState(`${laneId}|${session ?? ""}|${source ?? ""}`);
  const key = `${laneId}|${session ?? ""}|${source ?? ""}`;
  if (shown !== key) {
    setShown(key);
    setOpen(false);
  }
  return (
    <>
      <button
        type="button"
        onClick={() => setOpen(true)}
        disabled={disabled}
        title={t("openPanelHint")}
        aria-label={t("openPanel")}
        aria-haspopup="dialog"
        className="flex h-6 w-6 items-center justify-center rounded text-[11px] text-fg-secondary transition-colors hover:bg-surface-3 hover:text-fg-primary disabled:cursor-not-allowed disabled:opacity-40"
      >
        <Tags className="h-3.5 w-3.5" />
      </button>
      {open &&
        createPortal(
          <BranchManager
            laneId={laneId}
            session={session}
            source={source}
            dirty={dirty}
            merging={merging}
            onClose={() => setOpen(false)}
            onChanged={onChanged}
          />,
          document.body
        )}
    </>
  );
}

export default BranchesButton;