import { AppFormField } from "@/components/ui/form";
import { AppSelect } from "@/components/ui/select";
import type { AppSelectOption } from "@/components/ui/select";

import type { Agency } from "./add-issue-dialog-types";
import { AgencyDisplay } from "./agency-display";
import { plenaryIssueAgencies } from "./plenary-issue-agencies";

type AgencySelectProps = {
  label: string;
  value: string;
  onChange: (value: string) => void;
};

const agencyOptions: AppSelectOption<Agency>[] =
  plenaryIssueAgencies.map((agency) => ({
    data: agency,
    label: agency.name,
    value: agency.id,
  }));

export function AgencySelect({
  label,
  value,
  onChange,
}: AgencySelectProps) {
  return (
    <AppFormField label={label}>
      <AppSelect
        value={value}
        options={agencyOptions}
        placeholder="Select Agency"
        onChange={onChange}
        renderSelectedValue={(option) => (
          <AgencyDisplay agency={option?.data} />
        )}
        renderOption={(option) => (
          <AgencyDisplay agency={option.data} />
        )}
      />
    </AppFormField>
  );
}