gitfor/platform

import { Link, useNavigate } from "@tanstack/react-router";
import { inputClass } from "./ui/Field";
import { cn } from "~/utils/cn";

type Props = {
  owner: string;
  repo: string;
  current: string;
  branches: string[];
  tags: string[];
  path: string;
  mode: "tree" | "blob" | "commits" | "blame";
};

export function RefSwitcher({ owner, repo, current, branches, tags, path, mode }: Props) {
  const navigate = useNavigate();
  const known = branches.includes(current) || tags.includes(current);
  const groups = [
    { label: "Branches", refs: branches },
    { label: "Tags", refs: tags },
  ].filter((group) => group.refs.length > 0);

  function go(ref: string) {
    const splat = path ? `${ref}/${path}` : ref;
    if (mode === "commits") navigate({ to: "/$owner/$repo/commits/$", params: { owner, repo, _splat: splat } });
    else if (mode === "blame") navigate({ to: "/$owner/$repo/blame/$", params: { owner, repo, _splat: splat } });
    else if (mode === "blob") navigate({ to: "/$owner/$repo/blob/$", params: { owner, repo, _splat: splat } });
    else navigate({ to: "/$owner/$repo/tree/$", params: { owner, repo, _splat: splat } });
  }

  return (
    <>
      <label htmlFor="ref-switcher" className="sr-only">
        Switch branch or tag
      </label>
      <select
        id="ref-switcher"
        value={current}
        onChange={(event) => go(event.target.value)}
        className={cn(inputClass, "h-8 w-auto max-w-56 font-mono text-xs")}