import { Box, Typography, useMediaQuery, useTheme } from "@mui/material";
import { updateQuestion } from "@root/questions/actions";
import CustomCheckbox from "@ui_kit/CustomCheckbox";
import type { QuizQuestionEmoji } from "../../../model/questionTypes/emoji";

type SettingEmojiProps = {
  question: QuizQuestionEmoji;
};

export default function SettingEmoji({ question }: SettingEmojiProps) {
  const theme = useTheme();
  const isWrappColumn = useMediaQuery(theme.breakpoints.down(980));
  const isFigmaTablte = useMediaQuery(theme.breakpoints.down(990));
  const isMobile = useMediaQuery(theme.breakpoints.down(790));

  return (
    <Box
      sx={{
        display: "flex",
        justifyContent: "space-between",
        flexDirection: isWrappColumn ? "column" : "none",
      }}
    >
      {/* <Box
                sx={{
                    pt: isMobile ? "25px" : "20px",
                    pb: isMobile ? "25px" : "20px",
                    pl: "20px",
                    pr: isFigmaTablte ? (isWrappColumn ? "20px" : "0px") : "0px",
                    display: "flex",
                    flexDirection: "column",
                    gap: "14px",
                    width: "100%",
                }}
            >
                <Typography sx={{ height: isMobile ? "18px" : "auto", 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 !== "emoji") return;

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

                        question.content.own = target.checked;
                    })}
                />
            </Box> */}
      <Box
        sx={{
          pt: "20px",
          pb: "20px",
          pl: "20px",
          pr: isFigmaTablte ? "30px" : "20px",
          display: "flex",
          flexDirection: "column",
          gap: "14px",
          width: isMobile ? "auto" : "100%",
        }}
      >
        <Typography
          sx={{
            height: isMobile ? "18px" : "auto",
            fontWeight: "500",
            fontSize: "18px",
            color: " #4D4D4D",
          }}
        >
          Настройки вопросов
        </Typography>
        <CustomCheckbox
          dataCy="checkbox-optional-question"
          sx={{ mr: isMobile ? "0px" : "16px" }}
          label={"Необязательный вопрос"}
          checked={!question.content.required}
          handleChange={({ target }) =>
            updateQuestion<QuizQuestionEmoji>(question.id, (question) => {
              if (question.type !== "emoji") return;

              question.content.required = !target.checked;
            })
          }
        />
        {/*<Box*/}
        {/*    sx={{*/}
        {/*        width: isMobile ? "90%" : "auto",*/}
        {/*        display: "flex",*/}
        {/*        alignItems: "center",*/}
        {/*    }}*/}
        {/*>*/}
        {/*    <CustomCheckbox*/}
        {/*        sx={{*/}
        {/*            mr: isMobile ? "0px" : "16px",*/}
        {/*            height: isMobile ? "100%" : "26px",*/}
        {/*            alignItems: isMobile ? "flex-start" : "center",*/}
        {/*        }}*/}
        {/*        label={"Внутреннее название вопроса"}*/}
        {/*        checked={question.content.innerNameCheck}*/}
        {/*        handleChange={({ target }) => updateQuestion<QuizQuestionEmoji>(question.id, question => {*/}
        {/*            question.content.innerNameCheck = target.checked;*/}
        {/*            question.content.innerName = 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 }) => setInnerName(target.value)}*/}
        {/*    />*/}
        {/*)}*/}
      </Box>
    </Box>
  );
}