import { alpha } from "@mui/material/styles";
import type { Theme } from "@mui/material/styles";

export function getBorderColor(theme: Theme) {
  return theme.palette.mode === "dark"
    ? alpha(theme.palette.common.white, 0.14)
    : "#E2E8F0";
}

export function getSoftBg(theme: Theme) {
  return theme.palette.mode === "dark"
    ? alpha(theme.palette.common.white, 0.04)
    : "#FAFAFA";
}

export function getInputSx(theme: Theme) {
  return {
    "& .MuiOutlinedInput-root": {
      height: 40,
      borderRadius: "6px",
      bgcolor: theme.palette.background.paper,
      color: theme.palette.text.primary,
      fontSize: 12,
    },
    "& .MuiOutlinedInput-notchedOutline": {
      borderColor: getBorderColor(theme),
    },
    "&:hover .MuiOutlinedInput-notchedOutline": {
      borderColor:
        theme.palette.mode === "dark"
          ? alpha(theme.palette.common.white, 0.28)
          : "#CBD5E1",
    },
    "& .MuiInputBase-input": {
      fontSize: 12,
      color: theme.palette.text.primary,
      "&::placeholder": {
        color: theme.palette.text.secondary,
        opacity: 1,
      },
    },
  };
}

export function getSelectSx(theme: Theme) {
  return {
    height: 40,
    borderRadius: "6px",
    bgcolor: theme.palette.background.paper,
    fontSize: 12,
    color: theme.palette.text.primary,
    "& .MuiOutlinedInput-notchedOutline": {
      borderColor: getBorderColor(theme),
    },
    "&:hover .MuiOutlinedInput-notchedOutline": {
      borderColor:
        theme.palette.mode === "dark"
          ? alpha(theme.palette.common.white, 0.28)
          : "#CBD5E1",
    },
    "&.Mui-focused .MuiOutlinedInput-notchedOutline": {
      borderColor: theme.palette.primary.main,
      borderWidth: "1px",
    },
    "& .MuiSelect-select": {
      height: 40,
      py: 0,
      display: "flex",
      alignItems: "center",
    },
    "& .MuiSelect-icon": {
      fontSize: 18,
      color: theme.palette.text.primary,
    },
  };
}

export function getSelectMenuProps(theme: Theme) {
  return {
    anchorOrigin: {
      vertical: "bottom" as const,
      horizontal: "left" as const,
    },
    transformOrigin: {
      vertical: "top" as const,
      horizontal: "left" as const,
    },
    slotProps: {
      paper: {
        sx: {
          mt: 0.6,
          maxHeight: 190,
          borderRadius: "10px",
          bgcolor: theme.palette.background.paper,
          color: theme.palette.text.primary,
          boxShadow:
            theme.palette.mode === "dark"
              ? "0px 12px 28px rgba(0,0,0,0.45)"
              : "0px 8px 24px rgba(16, 24, 40, 0.12)",
          border: `1px solid ${getBorderColor(theme)}`,
          overflow: "hidden",
          "& .MuiList-root": {
            py: 0.5,
            maxHeight: 190,
            overflowY: "auto",
            "&::-webkit-scrollbar": {
              width: 6,
            },
            "&::-webkit-scrollbar-thumb": {
              backgroundColor:
                theme.palette.mode === "dark"
                  ? alpha(theme.palette.common.white, 0.22)
                  : "#D1D5DB",
              borderRadius: 99,
            },
          },
          "& .MuiMenuItem-root": {
            minHeight: 42,
            px: 2,
            fontSize: 12,
            bgcolor: theme.palette.background.paper,
            color: theme.palette.text.primary,
            "&:hover": {
              bgcolor:
                theme.palette.mode === "dark"
                  ? alpha(theme.palette.primary.main, 0.12)
                  : "#F8FAFC",
            },
            "&.Mui-selected": {
              bgcolor:
                theme.palette.mode === "dark"
                  ? alpha(theme.palette.primary.main, 0.18)
                  : alpha(theme.palette.primary.main, 0.08),
            },
            "&.Mui-selected:hover": {
              bgcolor:
                theme.palette.mode === "dark"
                  ? alpha(theme.palette.primary.main, 0.24)
                  : alpha(theme.palette.primary.main, 0.12),
            },
          },
        },
      },
    },
  };
}