frontPanel/src/pages/IntegrationsPage/IntegrationsModal/Amo/AmoQuestions/CurrentFieldSelectMobile.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 "@icons/arrow_down.svg";
import { MinifiedData } from "@/pages/IntegrationsPage/IntegrationsModal/Amo/types";
import { CustomRadioGroup } from "@/components/CustomRadioGroup/CustomRadioGroup";

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

export const CurrentFieldSelect: 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 = items.find((item) => item.id === selectedItemId) || null

    return (
        <Box>
            <Box
                sx={{
                    zIndex: 0,
                    position: "relative",
                    width: "100%",
                    height: "56px",
                    padding: "5px",
                    color: "#4D4D4D",
                    border: `2px solid ${theme.palette.common.white}`,
                    borderRadius: "12px",
                    background: "#EFF0F5",
                    display: "flex",
                    alignItems: "center",
                    cursor: "pointer",
                }}
                onClick={toggleOpened}
            >
                <Typography
                    sx={{
                        marginLeft: isMobile ? "10px" : "20px",
                        fontWeight: "400",
                        fontSize: "18px",

                        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>
            {opened &&
            <CustomRadioGroup
                items={items}
                selectedItemId={selectedItemId}
                setSelectedItem={setSelectedItem}
                handleScroll={() => { }}
                activeScope={undefined}
            />
            }
        </Box>
    );
};