gitfor/platform

import { Link } from "@tanstack/react-router";
import { setAutoMerge, setMergeQueue, updatePullBranch } from "~/fns/pull-review";
import { useAction } from "~/hooks/use-action";
import { Badge } from "./ui/Primitives";
import { Button } from "./ui/Button";
import { ErrorBanner } from "./ui/Field";
import type { usePull } from "~/hooks/use-pull";

type PullData = ReturnType<typeof usePull>;
type Props = { owner: string; repo: string; data: PullData; method: "merge" | "squash" | "rebase" };

/** Update-branch, conflict resolution, auto-merge and merge-queue controls that sit in the merge box. */
export function MergeAutomation({ owner, repo, data, method }: Props) {
  const { pull } = data;
  const number = pull.number;
  const update = useAction(updatePullBranch);
  const auto = useAction(setAutoMerge);
  const queue = useAction(setMergeQueue);
  const conflicted = pull.mergeable === "conflict";

  return (
    <div className="space-y-3 border-t border-gray-800 pt-3">
      <ErrorBanner message={update.error ?? auto.error ?? queue.error} />
      {data.canPushHead && (data.canUpdateBranch || conflicted) && (
        <div className="flex flex-wrap items-center gap-2 text-sm">
          <span className="text-gray-400">
            {conflicted
              ? "Merging the base branch into this branch has conflicts."
              : `This branch is ${pull.behindBy} commit${pull.behindBy === 1 ? "" : "s"} behind ${pull.baseRef}.`}
          </span>
          <span className="ml-auto flex gap-2">
            {conflicted && (
              <Link
                to="/$owner/$repo/pull/$number/conflicts"
                params={{ owner, repo, number: String(number) }}
                className="rounded-md border border-gray-700 px-2.5 py-1 text-xs text-gray-200 hover:border-accent-500"
              >
                Resolve conflicts
              </Link>
            )}