import { AppFormField } from "@/components/ui/form";
import { AppSelect } from "@/components/ui/select";
import type { AppSelectOption } from "@/components/ui/select";
import { AgencyDisplay } from "@/features/pswg/plenary/components/add-issue-dialog/agency-display";
import type { Agency } from "@/features/pswg/plenary/components/add-issue-dialog/add-issue-dialog-types";
import { plenaryIssueAgencies } from "@/features/pswg/plenary/components/add-issue-dialog/plenary-issue-agencies";

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

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

export function AgencySelect({ label, onChange, value }: 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>
  );
}