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 arrow_down from "../../assets/icons/arrow_down.svg";
import { MinifiedData } from "@/pages/IntegrationsPage/IntegrationsModal/Amo/types";

type CustomSelectProps = {
  items: MinifiedData[] | [];
  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, selectedItemId]);

  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={selectedItemId || ""}
        open={opened}
        MenuProps={{
          disablePortal: true,
          PaperProps: {
            onScroll: onScroll,
            style: {
              zIndex: 2,
              maxHeight: "300px",
              overflow: "auto",
              overflowX: "auto",
              paddingTop: "50px",
              marginTop: "-50px",
              borderRadius: "28px",
            },
          },
        }}
        sx={{
          display: "block",
          "& .MuiSelect-select.MuiSelect-outlined.MuiInputBase-input": {
            display: "none",
          },
          "& .MuiSelect-icon": {
            display: "none",
          },
          "& .MuiOutlinedInput-notchedOutline": {
            border: 0,
          },
          "& .MuiMenu-root.MuiModal-root": {
            zIndex: 0,
          },
        }}
        onChange={({ target }: SelectChangeEvent<string>) => setSelectedItem(target.value)}
        onClick={toggleOpened}
      >
        {menuItems}
      </Select>
    </Box>
  );
};