import Box from "@mui/material/Box";
import MenuItem from "@mui/material/MenuItem";
import Select from "@mui/material/Select";
import { useTheme } from "@mui/material/styles";
import type { SelectChangeEvent } from "@mui/material/Select";

import { AgencyDisplay } from "@/features/pswg/working-group/components/add-working-group-issue-dialog/agency-display";
import {
  getSelectMenuProps,
  getSelectSx,
} from "@/features/pswg/working-group/components/add-working-group-issue-dialog/add-working-group-issue-dialog-styles";
import { FieldLabel } from "@/features/pswg/working-group/components/add-working-group-issue-dialog/form-label";
import { workingGroupIssueAgencies } from "@/features/pswg/working-group/components/add-working-group-issue-dialog/working-group-issue-agencies";

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

export function AgencySelect({ label, onChange, value }: AgencySelectProps) {
  const theme = useTheme();
  const selectedAgency = workingGroupIssueAgencies.find(
    (agency) => agency.id === value,
  );

  return (
    <Box>
      <FieldLabel>{label}</FieldLabel>

      <Select
        fullWidth
        size="small"
        displayEmpty
        value={value}
        onChange={(event: SelectChangeEvent) => onChange(event.target.value)}
        renderValue={() => <AgencyDisplay agency={selectedAgency} />}
        sx={getSelectSx(theme)}
        MenuProps={getSelectMenuProps(theme)}
      >
        <MenuItem value="">
          <AgencyDisplay />
        </MenuItem>

        {workingGroupIssueAgencies.map((agency) => (
          <MenuItem key={agency.id} value={agency.id}>
            <AgencyDisplay agency={agency} />
          </MenuItem>
        ))}
      </Select>
    </Box>
  );
}