frontAnswerer/lib/components/ViewPublicationPage/tools/Select.tsx

import { useState, useEffect } from "react";
import {
  Select as MuiSelect,
  MenuItem,
  FormControl,
  Typography,
  useTheme,
} from "@mui/material";

import ArrowDown from "@icons/ArrowDownIcon";

import type { SelectChangeEvent, SxProps } from "@mui/material";

type SelectProps = {
  items: string[];
  activeItemIndex?: number;
  empty?: boolean;
  onChange?: (item: string, num: number) => void;
  sx?: SxProps;
  colorMain?: string;
  colorPlaceholder?: string;
  placeholder?: string;
  disabled?: boolean;
};

export const Select = ({
  items,
  activeItemIndex = 0,
  empty,
  onChange,
  sx,
  placeholder = "",
  colorMain = "#7E2AEA",
  colorPlaceholder = "#9A9AAF",
  disabled = false,
}: SelectProps) => {
  const [activeItem, setActiveItem] = useState<number>(
    empty ? -1 : activeItemIndex
  );
  const theme = useTheme();

  useEffect(() => {
    setActiveItem(activeItemIndex);
  }, [activeItemIndex]);

  const handleChange = (event: SelectChangeEvent) => {
    const newItemIndex = Number(event.target.value);

    if (newItemIndex === activeItem) {
      setActiveItem(-1);
      onChange?.("", -1);

      return;
    }

    setActiveItem(newItemIndex);
    onChange?.(items[newItemIndex], newItemIndex);
  };

  return (
    <FormControl
      disabled={disabled}
      fullWidth
      size="small"
      sx={{ width: "100%", height: "48px", ...sx }}
    >
      <MuiSelect
        displayEmpty
        renderValue={(value) =>
          value ? (
            items[Number(value)]
          ) : (
            <Typography sx={{ color: colorPlaceholder }}>
              {placeholder}
            </Typography>
          )
        }
        id="display-select"
        variant="outlined"
        value={activeItem === -1 ? "" : String(activeItem)}
        onChange={handleChange}
        sx={{
          width: "100%",
          height: "48px",
          borderRadius: "8px",
          "& .MuiOutlinedInput-notchedOutline": {
            border: `1px solid ${colorMain} !important`,
            height: "48px",
            borderRadius: "10px",
          },
          "& .MuiSelect-icon": {
          color: theme.palette.primary.main
          }
        }}
        MenuProps={{
          PaperProps: {
            sx: {
              mt: "8px",
              p: "4px",
              borderRadius: "8px",
              border: "1px solid #EEE4FC",
              boxShadow: "0px 8px 24px rgba(210, 208, 225, 0.4)",
            },
          },
          MenuListProps: {
            sx: {
              py: 0,
              display: "flex",
              flexDirection: "column",
              gap: "8px",
              "& .Mui-selected": {
                backgroundColor: "#F2F3F7",
                color: colorMain,
              },
            },
          },
        }}
        inputProps={{
          sx: {
            color: theme.palette.text.primary,
            display: "block",
            px: "9px",
            gap: "20px",
            "& .MuiTypography-root": {
              overflow: "hidden",
              textOverflow: "ellipsis",
            },
          },
        }}
        IconComponent={(props) => <ArrowDown {...props} />}
      >
        {items.map((item, index) => (
          <MenuItem
            key={item + index}
            value={index}
            sx={{
              display: "flex",
              alignItems: "center",
              gap: "20px",
              padding: "10px",
              borderRadius: "5px",
              color: colorPlaceholder,
              whiteSpace: "normal",
              wordBreak: "break-word",
            }}
          >
            {item}
          </MenuItem>
        ))}
      </MuiSelect>
    </FormControl>
  );
};