import type { QuizQuestionEmoji, QuizQuestionVariant } from "@frontend/squzanswerer";
import { Box, Typography, useMediaQuery, useTheme } from "@mui/material";
import { updateQuestion } from "@root/questions/actions";
import CustomCheckbox from "@ui_kit/CustomCheckbox";
import { memo } from "react";
import CustomTextField from "@ui_kit/CustomTextField";

type SettingEmojiProps = {
  questionId: string;
  isRequired: boolean;
  isMulti: boolean;
  isOwn: boolean;
  isLargeCheck?: boolean;
};

const SettingEmoji = memo<SettingEmojiProps>(function ({ questionId, ownPlaceholder, isRequired, isLargeCheck, isMulti, isOwn }) {
  const theme = useTheme();
  const isWrappColumn = useMediaQuery(theme.breakpoints.down(980));
  const isFigmaTablte = useMediaQuery(theme.breakpoints.down(990));
  const isTablet = useMediaQuery(theme.breakpoints.down(985));
  const isMobile = useMediaQuery(theme.breakpoints.down(790));

  const setOwnPlaceholder = (replText: string) => {
    updateQuestion(questionId, (question) => {
      if (question.type !== "varimg") return;

      question.content.ownPlaceholder = replText;
    });
  };

  return (
    <Box
      sx={{
        display: "flex",
        justifyContent: "space-between",
        flexDirection: isWrappColumn ? "column" : "none",
        pb: "20px",
        pl: "20px",
        pt: isTablet ? "5px" : "0px",
      }}
    >
      <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-long-text-answer"
          sx={{ mr: isMobile ? "0px" : "16px" }}
          label={"Многострочный ответ"}
          checked={isLargeCheck}
          handleChange={({ target }) => {
            updateQuestion<QuizQuestionVariant>(questionId, (question) => {
              question.content.largeCheck = target.checked;
            });
          }}
        />
        <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 sx={{ mt: isMobile ? "11px" : "6px", width: "100%" }}>
          <Typography
            sx={{
              height: isMobile ? "18px" : "auto",
              fontWeight: "500",
              fontSize: "18px",
              color: " #4D4D4D",
              mb: "14px",
            }}
          >
            Подсказка "своего ответа"
          </Typography>
          <CustomTextField
            sx={{
              maxWidth: "330px",
              width: "100%",
              mr: isMobile ? "0px" : "16px",
            }}
            maxLength={60}
            placeholder={"мой ответ: три"}
            value={ownPlaceholder}
            onChange={({ target }) => setOwnPlaceholder(target.value)}
          />
        </Box>
      </Box>
      <Box
        sx={{
          pt: "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={!isRequired}
          handleChange={({ target }) =>
            updateQuestion<QuizQuestionEmoji>(questionId, (question) => {
              if (question.type !== "emoji") return;

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

SettingEmoji.displayName = "SettingEmoji";

export default SettingEmoji;