/** Large result chips: worked | partial | failed | pending. */

import { Pressable } from "./Pressable";

export type ResultValue = "worked" | "partial" | "failed" | "pending";
export type ResolveResult = Exclude<ResultValue, "pending">;

const ALL: { value: ResultValue; label: string }[] = [
  { value: "worked", label: "Worked" },
  { value: "partial", label: "Partial" },
  { value: "failed", label: "Failed" },
  { value: "pending", label: "Pending" },
];

type Props = {
  value: ResultValue | null;
  onChange: (value: ResultValue) => void;
  /** Resolve UI excludes pending. */
  excludePending?: boolean;
};

export function ResultChips({ value, onChange, excludePending = false }: Props) {
  const options = excludePending
    ? ALL.filter((option) => option.value !== "pending")
    : ALL;

  return (
    <div class="chip-row" role="group" aria-label="Result">
      {options.map((option) => (
        <Pressable
          key={option.value}
          className={`chip result-${option.value}`}
          ariaPressed={value === option.value}
          onClick={() => onChange(option.value)}
        >
          {option.label}
        </Pressable>
      ))}
    </div>
  );
}