import { AppFormGrid } from "@/components/ui/form";
import type { AppSelectOption } from "@/components/ui/select";
import type { Agency } from "@/features/pswg/working-group-issues/components/create-issuses/add-working-group-issue-dialog-types";
import { AgencySelect } from "@/features/pswg/working-group-issues/components/create-issuses/agency-select";

type AdditionalAgencyFieldsProps = {
  agencyOptions: AppSelectOption<Agency>[];
  fifthAgency: string;
  fourthAgency: string;
  onFifthAgencyChange: (value: string) => void;
  onFourthAgencyChange: (value: string) => void;
  onSecondAgencyChange: (value: string) => void;
  onThirdAgencyChange: (value: string) => void;
  secondAgency: string;
  thirdAgency: string;
};

export function AdditionalAgencyFields({
  agencyOptions,
  fifthAgency,
  fourthAgency,
  onFifthAgencyChange,
  onFourthAgencyChange,
  onSecondAgencyChange,
  onThirdAgencyChange,
  secondAgency,
  thirdAgency,
}: AdditionalAgencyFieldsProps) {
  const selectedAgencyIds = [secondAgency, thirdAgency, fourthAgency, fifthAgency]
    .filter((agencyId) => agencyId.trim() !== "");
  const availableAgencyOptions = agencyOptions.filter(
    (option) => !selectedAgencyIds.includes(option.value),
  );

  return (
    <AppFormGrid>
      <AgencySelect
        label="Second Agency"
        options={agencyOptions}
        menuOptions={availableAgencyOptions}
        value={secondAgency}
        onChange={onSecondAgencyChange}
      />
      <AgencySelect
        label="Third Agency"
        options={agencyOptions}
        menuOptions={availableAgencyOptions}
        value={thirdAgency}
        onChange={onThirdAgencyChange}
      />
      <AgencySelect
        label="Fourth Agency"
        options={agencyOptions}
        menuOptions={availableAgencyOptions}
        value={fourthAgency}
        onChange={onFourthAgencyChange}
      />
      <AgencySelect
        label="Fifth Agency"
        options={agencyOptions}
        menuOptions={availableAgencyOptions}
        value={fifthAgency}
        onChange={onFifthAgencyChange}
      />
    </AppFormGrid>
  );
}