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

import { Box, Button, Typography, useMediaQuery, useTheme } from "@mui/material";
import { updateQuestion } from "@root/questions/actions";
import CustomCheckbox from "@ui_kit/CustomCheckbox";
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";
import { memo } from "react";
import type { QuizQuestionVariant } from "@model/questionTypes/variant";
import FormatIcon1 from "../../../assets/icons/questionsPage/FormatIcon1";
import FormatIcon2 from "../../../assets/icons/questionsPage/FormatIcon2";

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 Format = "carousel" | "masonry";

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

const FORMATS: FormatItem[] = [
  { value: "masonry", icon: FormatIcon2 },
  { value: "carousel", icon: FormatIcon1 },
];

type SettingOpytionsPictProps = {
  questionId: string;
  isRequired: boolean;
  isMulti: boolean;
  isOwn: boolean;
  proportions: Proportion;
  format: Format;
};

const SettingOptionsPict = memo<SettingOpytionsPictProps>(function ({
  questionId,
  isRequired,
  isMulti,
  isOwn,
  proportions,
  format,
}) {
  const theme = useTheme();
  const isTablet = useMediaQuery(theme.breakpoints.down(985));
  const isMobile = useMediaQuery(theme.breakpoints.down(790));
  const isFigmaTablte = useMediaQuery(theme.breakpoints.down(990));

  return (
    <Box
      sx={{
        display: "flex",
        justifyContent: "space-between",
        flexDirection: isTablet ? "column" : null,
        marginRight: isFigmaTablte ? (isMobile ? "0" : "0px") : "30px",
        pb: "20px",
        pl: "20px",
        pt: isTablet ? "5px" : "0px",
      }}
    >
      <Box sx={{ display: "flex", flexDirection: "column", width: "100%" }}>
        <Box
          sx={{
            boxSizing: "border-box",
            pt: "20px",
            pr: isFigmaTablte ? "19px" : "20px",
            display: "flex",
            flexDirection: "column",
            gap: "14px",
            width: "100%",
          }}
        >
          <Typography
            sx={{
              height: isMobile ? "18px" : "auto",
              fontWeight: "500",
              fontSize: "18px",
              color: " #4D4D4D",
            }}
          >
            Пропорции
          </Typography>
          <Box
            sx={{
              display: "flex",
              gap: "10px",
            }}
          >
            {PROPORTIONS.map((proportionItem, index) => (
              <SelectIconButton
                key={index}
                Icon={proportionItem.icon}
                isActive={proportionItem.value === proportions}
                onClick={() => {
                  updateQuestion<QuizQuestionImages>(questionId, (question) => {
                    if (question.type !== "images") return;
                    question.content.xy = proportionItem.value;
                  });
                }}
              />
            ))}
          </Box>
        </Box>
        <Box
          sx={{
            boxSizing: "border-box",
            pt: "20px",
            pr: isFigmaTablte ? "19px" : "20px",
            display: "flex",
            flexDirection: "column",
            gap: "14px",
            width: "100%",
          }}
        >
          <Typography
            sx={{
              height: isMobile ? "18px" : "auto",
              fontWeight: "500",
              fontSize: "18px",
              color: " #4D4D4D",
            }}
          >
            Настройки ответов
          </Typography>
          <CustomCheckbox
            dataCy="checkbox-multiple-answers"
            sx={{ mr: isMobile ? "0px" : "16px" }}
            label={"Можно несколько"}
            checked={isMulti}
            handleChange={({ target }) => {
              updateQuestion<QuizQuestionVariant>(questionId, (question) => {
                question.content.multi = target.checked;
              });
            }}
          />
          <CustomCheckbox
            dataCy="checkbox-own-answer"
            sx={{ mr: isMobile ? "0px" : "16px" }}
            label={'Вариант "свой ответ"'}
            checked={isOwn}
            handleChange={({ target }) => {
              updateQuestion<QuizQuestionVariant>(questionId, (question) => {
                question.content.own = target.checked;
              });
            }}
          />
        </Box>
      </Box>
      <Box sx={{ display: "flex", flexDirection: "column", width: "100%" }}>
        <Box
          sx={{
            boxSizing: "border-box",
            pt: "20px",
            pr: isFigmaTablte ? "19px" : "20px",
            display: "flex",
            flexDirection: "column",
            gap: "14px",
            width: "100%",
          }}
        >
          <Typography
            sx={{
              height: isMobile ? "18px" : "auto",
              fontWeight: "500",
              fontSize: "18px",
              color: " #4D4D4D",
            }}
          >
            Формат
          </Typography>
          <Box
            sx={{
              display: "flex",
              gap: "10px",
            }}
          >
            {FORMATS.map((formatItem, index) => (
              <SelectIconButton
                key={index}
                Icon={formatItem.icon}
                isActive={formatItem.value === format}
                onClick={() => {
                  updateQuestion<QuizQuestionImages>(questionId, (question) => {
                    if (question.type !== "images") return;
                    question.content.format = formatItem.value;
                  });
                }}
              />
            ))}
          </Box>
        </Box>
        <Box
          sx={{
            pt: "20px",
            pr: isFigmaTablte ? (isMobile ? "20px" : "0px") : "28px",
            display: "flex",
            flexDirection: "column",
            gap: "14px",
            width: "100%",
          }}
        >
          <Typography sx={{ fontWeight: "500", fontSize: "18px", color: " #4D4D4D" }}>Настройки вопросов</Typography>
          <CustomCheckbox
            dataCy="checkbox-optional-question"
            sx={{ alignItems: isMobile ? "flex-start" : "" }}
            label={"Необязательный вопрос"}
            checked={!isRequired}
            handleChange={({ target }) =>
              updateQuestion<QuizQuestionImages>(questionId, (question) => {
                if (question.type !== "images") return;

                question.content.required = !target.checked;
              })
            }
          />
        </Box>
      </Box>
    </Box>
  );
});

SettingOptionsPict.displayName = "SettingOptionsPict";

export default SettingOptionsPict;

interface Props {
  Icon: (props: { color: string }) => JSX.Element;
  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,
        },
      }}
    />
  );
}