import type { PullRequestRef, PullRequestStack } from "@t3tools/contracts";
import { CheckIcon } from "lucide-react";
import { MenuItem, MenuGroupLabel } from "../ui/menu";
import { PullRequestStackLayerContent } from "./PullRequestStackLayerContent";

export function PullRequestStackLayers({
  stack,
  reference,
  onSelect,
  pending = false,
}: {
  stack: PullRequestStack;
  reference: PullRequestRef;
  onSelect?: ((reference: PullRequestRef) => void) | undefined;
  pending?: boolean;
}) {
  return (
    <div className="max-h-80 overflow-y-auto">
      {stack.layers.toReversed().map((layer) => {
        return (
          <MenuItem
            key={layer.number}
            onClick={() => {
              onSelect?.({ ...reference, number: layer.number });
            }}
            disabled={!onSelect || pending}
            aria-current={layer.number === reference.number ? "true" : undefined}
          >
            <PullRequestStackLayerContent layer={layer} />
            {layer.number === reference.number ? (
              <CheckIcon aria-hidden className="size-3.5" />
            ) : null}
          </MenuItem>
        );
      })}
      <MenuGroupLabel>↳ {stack.base}</MenuGroupLabel>
    </div>
  );
}