import { RadioGroup, RadioGroupItem } from "../ui/radio-group";
import type { AuthorityTier } from "../../services/relatedPersonAuthority";
import { TIER_LABELS } from "../../services/relatedPersonAuthority";
import { TIER_ORDER } from "./tierWords";
import "./careAccess.css";

interface TierChoicesProps {
  name: string;
  /** Undefined while the grant is still being read: no tier is claimed. */
  value: AuthorityTier | undefined;
  descriptions: Record<AuthorityTier, string>;
  onChange: (tier: AuthorityTier) => void;
  disabled?: boolean;
}

// The three tiers as choices a reader can compare, each with what it allows beside it.
export const TierChoices = ({ name, value, descriptions, onChange, disabled = false }: TierChoicesProps) => (
  <RadioGroup
    className="tier-choices"
    value={value ?? ""}
    onValueChange={(next) => onChange(next as AuthorityTier)}
    disabled={disabled}
    aria-label="What they may do"
  >
    {TIER_ORDER.map((tier) => {
      const id = `${name}-${tier}`;
      return (
        <div key={tier} className="tier-choice" data-selected={value === tier} data-disabled={disabled}>
          <RadioGroupItem id={id} value={tier} className="tier-choice-radio" />
          <label htmlFor={id} className="tier-choice-label">
            <span className="tier-choice-name">{TIER_LABELS[tier]}</span>
            <span className="tier-choice-description">{descriptions[tier]}</span>
          </label>
        </div>
      );
    })}
  </RadioGroup>
);

export default TierChoices;