"use client";

import { Checkbox } from "@unlocalhosted/metalui";

export type RepoOption = { id: string; fullName: string; writable: boolean };

/**
 * The repositories a token or a connected app may reach, as checkboxes named `repos`. With
 * `needWrite`, ones the user can't push to can't be picked.
 */
export function RepoChecklist({ repos, needWrite }: { repos: RepoOption[]; needWrite: boolean }) {
  return (
    <div className="max-h-64 overflow-y-auto rounded-plate recipe-well-field p-1" role="group" aria-label="Repositories">
      {repos.length === 0 && <p className="px-3 py-3 type-body text-ink3">You don’t have any repositories yet.</p>}
      {repos.map((r) => {
        const disabled = needWrite && !r.writable;
        return (
          <label
            key={r.id}
            className={`flex min-h-8 items-center gap-2.5 rounded-row px-3 py-1.5 ${
              disabled ? "cursor-default opacity-50" : "cursor-pointer hover:recipe-row-list-hover"
            }`}
          >
            <Checkbox size="row" name="repos" value={String(r.id)} disabled={disabled} />
            <span className="font-mono text-[12px] text-ink">{r.fullName}</span>
            {disabled && <span className="ml-auto type-label engraved">No push access</span>}
          </label>
        );
      })}
    </div>
  );
}