import Box from "@mui/material/Box";
import type { SelectProps } from "@mui/material/Select";

import type { Agency } from "@/features/ministry/dashboard/components/add-dashboard-issue-dialog/add-dashboard-issue-dialog-types";
import { AgencySelect } from "@/features/ministry/dashboard/components/add-dashboard-issue-dialog/agency-select";

type SelectMenuProps = NonNullable<SelectProps["MenuProps"]>;

type AdditionalAgencyFieldsProps = {
  agencies?: Agency[];
  disabled?: boolean;
  emptyLabel?: string;
  fifthAgency: string;
  fourthAgency: string;
  onFifthAgencyChange: (value: string) => void;
  onFourthAgencyChange: (value: string) => void;
  onSecondAgencyChange: (value: string) => void;
  onThirdAgencyChange: (value: string) => void;
  secondAgency: string;
  thirdAgency: string;
  selectMenuProps?: SelectMenuProps;
};

export function AdditionalAgencyFields({
  agencies,
  disabled = false,
  emptyLabel,
  fifthAgency,
  fourthAgency,
  onFifthAgencyChange,
  onFourthAgencyChange,
  onSecondAgencyChange,
  onThirdAgencyChange,
  secondAgency,
  thirdAgency,
  selectMenuProps,
}: AdditionalAgencyFieldsProps) {
  return (
    <Box sx={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 2 }}>
      <AgencySelect
        agencies={agencies}
        disabled={disabled}
        emptyLabel={emptyLabel}
        label="Second Agency"
        value={secondAgency}
        onChange={onSecondAgencyChange}
        menuProps={selectMenuProps}
      />

      <AgencySelect
        agencies={agencies}
        disabled={disabled}
        emptyLabel={emptyLabel}
        label="Third Agency"
        value={thirdAgency}
        onChange={onThirdAgencyChange}
        menuProps={selectMenuProps}
      />

      <AgencySelect
        agencies={agencies}
        disabled={disabled}
        emptyLabel={emptyLabel}
        label="Fourth Agency"
        value={fourthAgency}
        onChange={onFourthAgencyChange}
        menuProps={selectMenuProps}
      />

      <AgencySelect
        agencies={agencies}
        disabled={disabled}
        emptyLabel={emptyLabel}
        label="Fifth Agency"
        value={fifthAgency}
        onChange={onFifthAgencyChange}
        menuProps={selectMenuProps}
      />
    </Box>
  );
}