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

import CustomTextField from "@ui_kit/CustomTextField";

import { Answer, useQuizViewStore } from "@stores/quizView";
import { useQuizSettings } from "@contexts/QuizDataContext";
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";

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

export const TextNormal = ({ currentQuestion, answer }: TextNormalProps) => {
  const { settings } = useQuizSettings();
  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, 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>
  );
};