import { Box, Typography, useTheme } from "@mui/material";

import CustomTextField from "@ui_kit/CustomTextField";

import { Answer, useQuizViewStore } from "@stores/quizView";
import { useRootContainerSize } from "@contexts/RootContainerWidthContext";

import { quizThemes } from "@utils/themes/Publication/themePublication";

import { useMemo, type ChangeEvent } from "react";
import type { QuizQuestionText } from "@model/questionTypes/text";
import { useQuizStore } from "@/stores/useQuizStore";

interface TextNormalProps {
  currentQuestion: QuizQuestionText;
  answer?: Answer;
  stepNumber?: number | null;
}

let isCrutch13112025 = window.location.pathname === "/d557133f-26b6-4b0b-93da-c538758a65d4";

const answresList = [
  "обогащение",
  "конфискация",
  "обналичивание",
  "протекция",
  "честность",

  "договорняк",
  "доверие",
  "кумовство",
  "офшор",
  "фаворитизм",

  "мздоимство",
  "схема",
  "монополия",
  "лоббизм",
  "комплаенс",

  "санкции",
  "судимость",
  "контрагент",
  "казнокрад",
  "откат",

  "штраф",
  "непотизм",
  "легализация",
  "бенефициар",
  "анонимность",

  "прачечная",
  "аффилированность",
  "декларация",
  "фальсификация",
  "расследование",
];
export const TextNormal = ({ currentQuestion, answer }: TextNormalProps) => {
  const { settings } = useQuizStore();
  const { updateAnswer } = useQuizViewStore((state) => state);
  const isMobile = useRootContainerSize() < 650;
  const isTablet = useRootContainerSize() < 850;
  const theme = useTheme();

  const onInputChange = async ({ target }: ChangeEvent<HTMLInputElement>) => {
    updateAnswer(
      currentQuestion.id,
      target.value,
      isCrutch13112025
        ? Number(target.value.replace(/\s+/g, "").toLowerCase() === answresList[currentQuestion.page])
        : 0
    );
  };
  const choiceImgUrlQuestion = useMemo(() => {
    if (
      currentQuestion.content.editedUrlImagesList !== undefined &&
      currentQuestion.content.editedUrlImagesList !== null
    ) {
      return currentQuestion.content.editedUrlImagesList[isMobile ? "mobile" : isTablet ? "tablet" : "desktop"];
    } else {
      return currentQuestion.content.back;
    }
  }, [currentQuestion]);
  let isCrutch23022025 = window.location.pathname === "/bf8cae3a-e150-479d-befa-7f264087b223";
  return (
    <Box>
      <Typography
        variant="h5"
        color={theme.palette.text.primary}
        sx={{ wordBreak: "break-word" }}
      >
        {currentQuestion.title}
      </Typography>
      <Box
        sx={{
          display: "flex",
          width: "100%",
          marginTop: "20px",
          flexDirection: isCrutch23022025 ? "column" : isMobile ? "column-reverse" : undefined,
          alignItems: "center",
        }}
      >
        <CustomTextField
          placeholder={currentQuestion.content.placeholder}
          value={answer || ""}
          onChange={onInputChange}
          sx={{
            "& .MuiOutlinedInput-root": {
              background: settings.cfg.design
                ? quizThemes[settings.cfg.theme].isLight
                  ? "#F2F3F7"
                  : "rgba(255,255,255, 0.3)"
                : "transparent",
            },
            "& .MuiOutlinedInput-notchedOutline": { borderColor: "#9A9AAF" },
            "&:focus-visible": { borderColor: theme.palette.primary.main },
          }}
        />
        {choiceImgUrlQuestion && choiceImgUrlQuestion !== " " && choiceImgUrlQuestion !== null && (
          <Box
            sx={{
              maxWidth: isCrutch23022025 ? undefined : "400px",
              width: isCrutch23022025 ? "auto" : "100%",
              height: isCrutch23022025 ? "auto" : "300px",
              margin: "15px",
            }}
            onClick={(event) => event.preventDefault()}
          >
            <img
              key={currentQuestion.id}
              src={choiceImgUrlQuestion}
              style={{ width: "100%", height: "100%", objectFit: "cover" }}
              alt=""
            />
          </Box>
        )}
      </Box>
    </Box>
  );
};