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 type { ChangeEvent } from "react";
import type { QuizQuestionText } from "@model/questionTypes/text";

interface TextNormalProps {
  currentQuestion: QuizQuestionText;
  answer?: Answer;
  inputHC: (text: string) => void;
  stepNumber?: number | null;
}

export const TextNormal = ({ currentQuestion, answer, inputHC }: TextNormalProps) => {
  const { settings } = useQuizSettings();
  const { updateAnswer } = useQuizViewStore((state) => state);
  const isMobile = useRootContainerSize() < 650;
  const theme = useTheme();

  const onInputChange = async ({ target }: ChangeEvent<HTMLInputElement>) => {
    updateAnswer(currentQuestion.id, target.value, 0);
    inputHC(target.value);
  };

  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: 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 },
          }}
        />
        {currentQuestion.content.back && currentQuestion.content.back !== " " && (
          <Box
            sx={{
              maxWidth: "400px",
              width: "100%",
              height: "300px",
              margin: "15px",
            }}
          >
            <img
              key={currentQuestion.id}
              src={currentQuestion.content.back}
              style={{ width: "100%", height: "100%", objectFit: "cover" }}
              alt=""
            />
          </Box>
        )}
      </Box>
    </Box>
  );
};