import Link from "next/link";

const LETTERS = "ABCDEFGHIJKLMNOPQRSTUVWXYZ".split("");

function withParam(current: Record<string, string | undefined>, key: string, value: string | null) {
  const params = new URLSearchParams();
  for (const [k, v] of Object.entries(current)) {
    if (v && k !== key) params.set(k, v);
  }
  if (value) params.set(key, value);
  const query = params.toString();
  return `/requests${query ? `?${query}` : ""}`;
}

export function AlphabetFilter({
  activeLetter,
  availableLetters,
  current,
}: {
  activeLetter: string | null;
  availableLetters: Set<string>;
  current: Record<string, string | undefined>;
}) {
  return (
    <div className="flex flex-wrap gap-1">
      <Link
        href={withParam(current, "letter", null)}
        className={`rounded px-2 py-1 text-sm font-medium ${
          !activeLetter
            ? "bg-terracotta text-white"
            : "text-charcoal/60 hover:text-terracotta"
        }`}
      >
        All
      </Link>
      {LETTERS.map((letter) => {
        const isAvailable = availableLetters.has(letter);
        return (
          <Link
            key={letter}
            href={isAvailable ? withParam(current, "letter", letter) : "#"}
            aria-disabled={!isAvailable}
            className={`rounded px-2 py-1 text-sm font-medium ${
              activeLetter === letter
                ? "bg-terracotta text-white"
                : isAvailable
                  ? "text-charcoal/60 hover:text-terracotta"
                  : "pointer-events-none text-charcoal/20"
            }`}
          >
            {letter}
          </Link>
        );
      })}
    </div>
  );
}