frontPanel/src/components/CustomSelect/CustomSelect.tsx

import * as React from "react";
import { FC, useCallback, useMemo, useRef, useState } from "react";
import {
  Avatar,
  MenuItem,
  Select,
  SelectChangeEvent,
  Typography,
  useMediaQuery,
  useTheme,
  Box,
} from "@mui/material";
import "./CustomSelect.css";
import arrow_down from "../../assets/icons/arrow_down.svg";


type Items = {
  id: string;
  title: string;
  subTitle: string;
}

type CustomSelectProps = {
  items: Items[] | [];
  selectedItemId: string | null;
  setSelectedItem: (value: string | null) => void;
  handleScroll: () => void;
};


export const CustomSelect: FC<CustomSelectProps> = ({
  items,
  selectedItemId,
  setSelectedItem,
  handleScroll,
}) => {
  const theme = useTheme();
  const isMobile = useMediaQuery(theme.breakpoints.down(600));

  const ref = useRef<HTMLDivElement | null>(null);

  const [opened, setOpened] = useState<boolean>(false);

  const toggleOpened = useCallback(() => {
    setOpened((isOpened) => !isOpened);
  }, []);

  const onScroll = useCallback((e: React.UIEvent<HTMLDivElement>) => {
    const scrollHeight = e.currentTarget.scrollHeight;
    const scrollTop = e.currentTarget.scrollTop;
    const clientHeight = e.currentTarget.clientHeight;
    const scrolledToBottom = scrollTop / (scrollHeight - clientHeight) > 0.9;

    if (scrolledToBottom) {
      handleScroll();
    }
  }, []);

  const currentItem = useMemo(() => (
    items.find(item => item.id === selectedItemId) || null
  ), [selectedItemId, items])

  const menuItems = useMemo(() => {
    if (items.length !== 0) {
      return items.map((item) => (
        <MenuItem
          key={item.id}
          value={item.id}
          sx={{
            padding: "6px 0",
            zIndex: 2,
            borderTop: "1px solid rgba(154, 154, 175, 0.1)",
            width: "auto",
          }}
        >
          <Box
            sx={{
              fontSize: "16px",
              color: "#4D4D4D",
              display: "flex",
              flexDirection: isMobile ? "column" : "row",
              justifyContent: "space-evenly",
              width: "100%",
            }}
          >
            <Typography
              sx={{
                width: "33%",
                borderRight: isMobile
                  ? "none"
                  : "1px solid  rgba(154, 154, 175, 0.1)",
                padding: isMobile ? "5px 0 5px 20px" : "10px 0 10px 20px",
              }}
            >
              {item.title}
            </Typography>
            <Typography
              sx={{
                width: "33%",
                borderRight: isMobile
                  ? "none"
                  : "1px solid  rgba(154, 154, 175, 0.1)",
                padding: isMobile ? "5px 0 5px 20px" : "10px 0 10px 20px",
                color: isMobile ? "#9A9AAF" : "#4D4D4D",
              }}
            >
              {item.subTitle}
            </Typography>
          </Box>
        </MenuItem>
      ));
    }
    return (
      <MenuItem key={"-1"} disabled sx={{ padding: "12px", zIndex: 2 }}>
        нет данных
      </MenuItem>
    );
  }, [items]);

  return (
    <Box>
      <Box
        sx={{
          zIndex: 3,
          position: "relative",
          width: "100%",
          height: "56px",
          padding: "5px",
          color:
            currentItem === null
              ? theme.palette.grey2.main
              : theme.palette.brightPurple.main,
          border: `2px solid ${theme.palette.common.white}`,
          borderRadius: "30px",
          background: "#EFF0F5",
          display: "flex",
          alignItems: "center",
          cursor: "pointer",
        }}
        onClick={() => {if (ref.current !== null) ref.current?.click()}}
      >
        <Avatar sx={{ width: 46, height: 46, marginRight: 1 }} />
        <Typography
          sx={{
            marginLeft: isMobile ? "10px" : "20px",
            fontWeight: currentItem === null ? "400" : "500",
            fontSize: isMobile ? "14px" : "16px",
            textOverflow: "ellipsis",
            whiteSpace: "nowrap",
            overflow: "hidden",
            flexGrow: 1,
          }}
        >
          {currentItem?.title || "Выберите ответственного за сделку"}
        </Typography>
        <img
          src={arrow_down}
          alt="check"
          style={{
            position: "absolute",
            top: "50%",
            right: "10px",
            transform: `translateY(-50%) rotate(${opened ? "180deg" : "0deg"}`,
            height: "36px",
            width: "36px",
          }}
          className={`select-icon ${opened ? "opened" : ""}`}
        />
      </Box>
      <Select
        ref={ref}
        className="select"
        value={""}
        open={opened}
        MenuProps={{
          disablePortal: true,
          PaperProps: {
            onScroll: onScroll,
            style: {
              zIndex: 2,
              maxHeight: "300px",
              overflow: "auto",
              overflowX: "auto",
            },
          },
        }}
        sx={{}}
        onChange={({ target }: SelectChangeEvent<string>) => setSelectedItem(target.value)}
        onClick={toggleOpened}
      >
        {menuItems}
      </Select>
    </Box>
  );
};