import { mergeStack, restackPullRequest } from "~/fns/stacks";
import { useAction } from "~/hooks/use-action";
import { Button } from "~/ui/Button";
import { Callout, ErrorBanner } from "~/ui/Callout";
import { Code } from "~/ui/Code";
import type { usePull } from "~/hooks/use-pull";
import type { MergeMethod } from "~/lib/types";

type PullData = ReturnType<typeof usePull>;

/**
 * Merge box controls for a pull request stacked on another one: it can't merge into its parent's branch
 * from here, so it offers restacking onto the parent and merging the whole stack up to this point.
 */
export function StackMergeControls({
  owner,
  repo,
  data,
  method,
}: {
  owner: string;
  repo: string;
  data: PullData;
  method: MergeMethod;
}) {
  const restack = useAction(restackPullRequest);
  const merge = useAction(mergeStack);
  const { pull, stackedOn, stack } = data;
  if (!stackedOn) return null;
  const below = stack.filter((entry) => !entry.merged && entry.state === "open");
  const count = below.findIndex((entry) => entry.current) + 1;
  const trunk = stack[0]?.baseRef ?? pull.baseRef;
  return (
    <div className="space-y-3">
      <Callout tone="accent">
        Stacked on #{stackedOn.number}. When the pull requests below merge, this one is retargeted to{" "}
        <Code>{trunk}</Code> and restacked automatically.
      </Callout>
      <ErrorBanner message={restack.error ?? merge.error} />
      <div className="flex flex-wrap gap-2">
        {data.needsRestack && data.canPushHead && (
          <Button
            pending={restack.pending}
            onClick={() => restack.run({ data: { owner, repo, number: pull.number, expectedHead: pull.headSha } })}
          >
            Restack onto #{stackedOn.number}
          </Button>
        )}
        {data.canMerge && !data.autoMerge && (
          <Button
            variant="primary"
            pending={merge.pending}
            onClick={() => merge.run({ data: { owner, repo, number: pull.number, method } })}
          >
            Merge stack ({count} pull request{count === 1 ? "" : "s"})
          </Button>
        )}
      </div>
      {data.autoMerge && (
        <p className="text-xs text-gray-500">
          Auto-merge is on: this merges into <Code>{trunk}</Code> once everything below it has merged and its checks
          pass.
        </p>
      )}
    </div>
  );
}