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

import {
  Box,
  Button,
  Tooltip,
  Typography,
  useMediaQuery,
  useTheme,
} from "@mui/material";
import { setQuestionInnerName, updateQuestion } 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);
  }, 200);

  const updateProportions = (proportions: Proportion) => {
    updateQuestion(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 }) => updateQuestion(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 }) =>
                                    updateQuestion(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 }) => updateQuestion(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={() => updateQuestion(question.id, question => {
                                if (question.type !== "images") return;

                                question.content.format = "carousel";
                            })
                            }
                            isActive={question.content.format === "carousel"}
                            Icon={FormatIcon2}
                        />
                        <SelectIconButton
                            onClick={() => updateQuestion(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
            dataCy="checkbox-optional-question"
            sx={{ alignItems: isMobile ? "flex-start" : "" }}
            label={"Необязательный вопрос"}
            checked={!question.content.required}
            handleChange={({ target }) =>
              updateQuestion<QuizQuestionImages>(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 }) => updateQuestion(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,
        },
      }}
    />
  );
}