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/Badge";
import { Button } from "~/ui/Button";
import { ErrorBanner } from "~/ui/Callout";
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-kumo-hairline 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-kumo-subtle">
            {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) }}