frontPanel/src/pages/Questions/OptionsPicture/settingOpytionsPict.tsx

import {
    Box,
    Button,
    Tooltip,
    Typography,
    useMediaQuery,
    useTheme,
} from "@mui/material";
import { setQuestionInnerName, updateQuestionWithFnOptimistic } from "@root/questions/actions";
import CustomCheckbox from "@ui_kit/CustomCheckbox";
import CustomTextField from "@ui_kit/CustomTextField";
import { useDebouncedCallback } from "use-debounce";
import InfoIcon from "../../../assets/icons/InfoIcon";
import FormatIcon1 from "../../../assets/icons/questionsPage/FormatIcon1";
import FormatIcon2 from "../../../assets/icons/questionsPage/FormatIcon2";
import ProportionsIcon11 from "../../../assets/icons/questionsPage/ProportionsIcon11";
import ProportionsIcon12 from "../../../assets/icons/questionsPage/ProportionsIcon12";
import ProportionsIcon21 from "../../../assets/icons/questionsPage/ProportionsIcon21";
import type { QuizQuestionImages } from "../../../model/questionTypes/images";


type Proportion = "1:1" | "2:1" | "1:2";

type ProportionItem = {
    value: Proportion;
    icon: (props: { color: string; }) => JSX.Element;
};

const PROPORTIONS: ProportionItem[] = [
    { value: "1:1", icon: ProportionsIcon11 },
    { value: "2:1", icon: ProportionsIcon21 },
    { value: "1:2", icon: ProportionsIcon12 },
];

type SettingOpytionsPictProps = {
    question: QuizQuestionImages;
};

export default function SettingOpytionsPict({ question }: SettingOpytionsPictProps) {
    const theme = useTheme();
    const isTablet = useMediaQuery(theme.breakpoints.down(985));
    const isMobile = useMediaQuery(theme.breakpoints.down(790));
    const isFigmaTablte = useMediaQuery(theme.breakpoints.down(990));

    const debounced = useDebouncedCallback((value) => {
        setQuestionInnerName(question.id, value);
    }, 1000);

    const updateProportions = (proportions: Proportion) => {
        updateQuestionWithFnOptimistic(question.id, question => {
            if (question.type !== "images") return;

            question.content.xy = proportions;
        });
    };

    return (
        <>
            <Box
                sx={{
                    display: "flex",
                    justifyContent: "space-between",
                    flexDirection: isTablet ? "column" : null,
                    marginRight: isFigmaTablte ? (isMobile ? "0" : "0px") : "30px",
                }}
            >
                <Box
                    sx={{
                        pt: isMobile ? "25px" : "20px",
                        pb: isMobile ? "25px" : "20px",
                        pl: "20px",
                        pr: isFigmaTablte ? (isMobile ? "20px" : "0px") : "28px",
                        display: "flex",
                        flexDirection: "column",
                        gap: "14px",
                        width: "100%",
                    }}
                >
                    <Box sx={{ pb: isMobile ? "11px" : "6px" }}>
                        <Typography
                            sx={{
                                fontWeight: "500",
                                fontSize: "18px",
                                color: " #4D4D4D",
                                mb: isMobile ? "10px" : "14px",
                            }}
                        >
                            Пропорции
                        </Typography>
                        <Box
                            sx={{
                                display: "flex",
                                gap: "10px",
                            }}
                        >
                            {PROPORTIONS.map(({ value, icon }, index) => (
                                <SelectIconButton
                                    key={index}
                                    onClick={() => updateProportions(value)}
                                    isActive={question.content.xy === value}
                                    Icon={icon}
                                />
                            ))}
                        </Box>
                    </Box>

                    <Typography
                        sx={{ fontWeight: "500", fontSize: "18px", color: " #4D4D4D" }}
                    >
                        Настройки ответов
                    </Typography>

                    <CustomCheckbox
                        sx={{ display: "block", mr: isMobile ? "0px" : "16px" }}
                        label={"Можно несколько"}
                        checked={question.content.multi}
                        dataCy="multiple-answers-checkbox"
                        handleChange={({ target }) => updateQuestionWithFnOptimistic(question.id, question => {
                            if (question.type !== "images") return;

                            question.content.multi = target.checked;
                        })
                        }
                    />
                    {question.content.xy !== "1:1" &&
                        question.content.format !== "masonry" && (
                            <CustomCheckbox
                                sx={{ display: "block", mr: isMobile ? "0px" : "16px" }}
                                label={"Большие картинки"}
                                checked={question.content.largeCheck}
                                handleChange={({ target }) =>
                                    updateQuestionWithFnOptimistic(question.id, question => {
                                        if (question.type !== "images") return;

                                        question.content.largeCheck = target.checked;
                                    })
                                }
                            />
                        )}
                    <CustomCheckbox
                        sx={{ display: "block", mr: isMobile ? "0px" : "16px" }}
                        label={'Вариант "свой ответ"'}
                        checked={question.content.own}
                        handleChange={({ target }) => updateQuestionWithFnOptimistic(question.id, question => {
                            if (question.type !== "images") return;

                            question.content.own = target.checked;
                        })
                        }
                    />
                </Box>
                <Box
                    sx={{
                        pt: isMobile ? "25px" : "20px",
                        pb: isMobile ? "25px" : "20px",
                        pl: "20px",
                        pr: isFigmaTablte ? (isMobile ? "20px" : "0px") : "28px",
                        display: "flex",
                        flexDirection: "column",
                        gap: "14px",
                        width: "100%",
                    }}
                >
                    <Box
                        sx={{
                            marginBottom: "5px",
                            opacity: question.content.xy !== "1:1" ? 1 : 0,
                            display: isTablet
                                ? question.content.xy === "1:1"
                                    ? "none"
                                    : "block"
                                : "block",
                        }}
                    >
                        <Typography
                            sx={{
                                marginBottom: "15px",
                                fontWeight: "500",
                                fontSize: "18px",
                                color: " #4D4D4D",
                            }}
                        >
                            Формат
                        </Typography>
                        <SelectIconButton
                            onClick={() => updateQuestionWithFnOptimistic(question.id, question => {
                                if (question.type !== "images") return;

                                question.content.format = "carousel";
                            })
                            }
                            isActive={question.content.format === "carousel"}
                            Icon={FormatIcon2}
                        />
                        <SelectIconButton
                            onClick={() => updateQuestionWithFnOptimistic(question.id, question => {
                                if (question.type !== "images") return;

                                question.content.format = "masonry";
                            })
                            }
                            isActive={question.content.format === "masonry"}
                            Icon={FormatIcon1}
                        />
                    </Box>
                    <Typography
                        sx={{ fontWeight: "500", fontSize: "18px", color: " #4D4D4D" }}
                    >
                        Настройки вопросов
                    </Typography>
                    <CustomCheckbox
                        sx={{ alignItems: isMobile ? "flex-start" : "" }}
                        label={"Необязательный вопрос"}
                        checked={question.content.required}
                        handleChange={({ target }) => updateQuestionWithFnOptimistic(question.id, question => {
                            if (question.type !== "images") return;

                            question.content.required = target.checked;
                        })
                        }
                    />
                    <Box
                        sx={{
                            width: isMobile ? "90%" : "auto",
                            display: "flex",
                            alignItems: "center",
                        }}
                    >
                        <CustomCheckbox
                            sx={{
                                height: isMobile ? "100%" : "26px",
                                alignItems: isMobile ? "flex-start" : "center",
                            }}
                            label={"Внутреннее название вопроса"}
                            checked={question.content.innerNameCheck}
                            handleChange={({ target }) => updateQuestionWithFnOptimistic(question.id, question => {
                                if (question.type !== "images") return;

                                question.content.innerNameCheck = target.checked;
                                question.content.innerName = "";
                            })
                            }
                        />
                        <Tooltip
                            title="Будет отображаться как заголовок вопроса в приходящих заявках."
                            placement="top"
                        >
                            <Box>
                                <InfoIcon />
                            </Box>
                        </Tooltip>
                    </Box>
                    {question.content.innerNameCheck && (
                        <CustomTextField
                            placeholder={"Внутреннее описание вопроса"}
                            text={question.content.innerName}
                            onChange={({ target }) => debounced(target.value)}
                        />
                    )}
                </Box>
            </Box>
        </>
    );
}

interface Props {
    Icon: (props: { color: string; }) => JSX.Element;
    // Icon: React.ElementType;
    isActive?: boolean;
    onClick: () => void;
}

export function SelectIconButton({ Icon, isActive = false, onClick }: Props) {
    const theme = useTheme();

    return (
        <Button
            onClick={onClick}
            variant="outlined"
            startIcon={
                <Icon
                    color={
                        isActive
                            ? theme.palette.navbarbg.main
                            : theme.palette.brightPurple.main
                    }
                />
            }
            sx={{
                backgroundColor: isActive ? theme.palette.brightPurple.main : "#eee4fc",

                borderRadius: 0,
                border: "none",
                color: isActive
                    ? theme.palette.brightPurple.main
                    : theme.palette.grey2.main,
                p: "7px",
                width: "40px",
                height: "40px",
                minWidth: 0,
                "& .MuiButton-startIcon": {
                    mr: 0,
                    ml: 0,
                },
                "&:hover": {
                    border: "none",
                    borderColor: isActive
                        ? theme.palette.brightPurple.main
                        : theme.palette.grey2.main,
                },
            }}
        />
    );
}