"use client";

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

import { ChevronDown } from "@/components/ui/icon";
import {
  getElevatedSelectMenuProps,
  getSelectMenuProps,
  getSelectSx,
} from "@/features/ministry/dashboard/components/add-dashboard-issue-dialog/add-dashboard-issue-dialog-styles";

export const ISSUE_ESCALATION_OPTIONS = ["CDC", "CEFP"] as const;

const escalationSelectSx = {
  height: 28,
  minWidth: 191,
  bgcolor: "#fafafa",
  borderRadius: "6px",
  "& .MuiOutlinedInput-notchedOutline": {
    borderColor: "#f5f5f5",
  },
  "&:hover .MuiOutlinedInput-notchedOutline": {
    borderColor: "#f5f5f5",
  },
  "&.Mui-focused .MuiOutlinedInput-notchedOutline": {
    borderColor: "#f5f5f5",
    borderWidth: "1px",
  },
  "& .MuiSelect-select": {
    height: 28,
    minHeight: "28px !important",
    py: "2px",
    px: "8px",
    display: "flex",
    alignItems: "center",
    boxSizing: "border-box",
  },
  "& .MuiSelect-icon": {
    fontSize: 20,
    color: "#717680",
    right: 8,
  },
} as const;

type IssueEscalationSelectProps = {
  value: string;
  placeholder?: string;
  menuZIndex?: number;
  onChange: (value: string) => void;
};

export function IssueEscalationSelect({
  value,
  placeholder = "No Escalation",
  menuZIndex,
  onChange,
}: IssueEscalationSelectProps) {
  const theme = useTheme();

  const handleChange = (event: SelectChangeEvent<string>) => {
    onChange(event.target.value);
  };

  const baseMenuProps =
    menuZIndex != null
      ? getElevatedSelectMenuProps(theme, menuZIndex)
      : getSelectMenuProps(theme);

  const menuProps = {
    ...baseMenuProps,
    slotProps: {
      ...baseMenuProps.slotProps,
      paper: {
        ...baseMenuProps.slotProps?.paper,
        sx: {
          ...(baseMenuProps.slotProps?.paper as { sx?: object } | undefined)?.sx,
          minWidth: 191,
        },
      },
    },
  };

  return (
    <Select
      displayEmpty
      value={value}
      onChange={handleChange}
      IconComponent={ChevronDown}
      renderValue={(selected) => (
        <Typography
          sx={{
            fontSize: 12,
            fontWeight: 500,
            color: selected ? "#181d27" : "#717680",
            lineHeight: 1,
            whiteSpace: "nowrap",
          }}
          noWrap
        >
          {selected || placeholder}
        </Typography>
      )}
      sx={{
        ...getSelectSx(theme),
        ...escalationSelectSx,
      }}
      MenuProps={menuProps}
    >
      <MenuItem
        value=""
        sx={{
          px: "12px",
          py: "10px",
          minHeight: "unset",
          fontSize: 12,
          fontWeight: 500,
          color: "#181d27",
        }}
      >
        No Escalation
      </MenuItem>
      {ISSUE_ESCALATION_OPTIONS.map((option) => (
        <MenuItem
          key={option}
          value={option}
          sx={{
            px: "12px",
            py: "10px",
            minHeight: "unset",
            fontSize: 12,
            fontWeight: 500,
            color: "#181d27",
          }}
        >
          {option}
        </MenuItem>
      ))}
    </Select>
  );
}