import { CustomRadioGroup } from "@/components/CustomRadioGroup/CustomRadioGroup"
import { Box, Typography, useMediaQuery, useTheme } from "@mui/material"
import { MinifiedData } from "../types";
import { CustomSelect } from "@/components/CustomSelect/CustomSelect";
import { CurrentFieldSelect } from "@/pages/IntegrationsPage/IntegrationsModal/Amo/Questions/CurrentFieldSelectMobile";

interface Props {
    items: MinifiedData[];
    fieldsItems: MinifiedData[];
    currentField: string;
    currentQuestion: string;
    setCurrentField: (value: string) => void;
    setCurrentQuestion: (value: string) => void;
    handleScroll: () => void;
}
export const CurrentFields = ({
    items,
    fieldsItems,
    currentField,
    currentQuestion,
    setCurrentField,
    setCurrentQuestion,
    handleScroll,
}: Props) => {
    const theme = useTheme();
    const isMobile = useMediaQuery(theme.breakpoints.down(600));
    return (
        <Box
            sx={{
                display: "inline-flex",
                justifyContent: isMobile ? undefined : "space-between",
                width: "100%",
                height: "326px",
                flexDirection: isMobile ? "column" : undefined,
                gap: isMobile ? "30px" : undefined
            }}
        >
            <Box
                sx={{
                    mr: "22px",
                    width: isMobile ? "100%" : "50%",
                }}
            >
                <Typography
                    sx={{
                        fontSize: "16px",
                        fontWeight: 400,
                        lineHeight: "18.96px",
                        textAlign: "left",
                        color: "#9A9AAF",
                        m: "15px 0 10px",

                    }}
                >Выберите поле</Typography>
                {isMobile &&
                    <CurrentFieldSelect
                        items={fieldsItems}
                        selectedItemId={currentField}
                        setSelectedItem={setCurrentField}
                        handleScroll={handleScroll} />
                }
                {!isMobile &&
                    <CustomRadioGroup
                        items={fieldsItems}
                        selectedItemId={currentField}
                        setSelectedItem={setCurrentField}
                        handleScroll={handleScroll}
                        activeScope={undefined}
                    />
                }

            </Box>
            <Box
                sx={{
                    width: isMobile ? "100%" : "50%",

                }}
            >
                <Typography
                    sx={{
                        fontSize: "16px",
                        fontWeight: 400,
                        lineHeight: "18.96px",
                        textAlign: "left",
                        color: "#9A9AAF",
                        m: "15px 0 10px",
                    }}
                >Выберите вопрос для этого поля</Typography>
                {isMobile &&
                    <CurrentFieldSelect
                        items={items}
                        selectedItemId={currentQuestion}
                        setSelectedItem={setCurrentQuestion}
                        handleScroll={() => { }} />
                }
                {!isMobile &&
                    <CustomRadioGroup
                        items={items}
                        selectedItemId={currentQuestion}
                        setSelectedItem={setCurrentQuestion}
                        handleScroll={() => { }}
                        activeScope={undefined}
                    />
                }

            </Box>
        </Box>
    )
}