import { Box, TextField as MuiTextField, TextFieldProps, Typography, useTheme } from "@mui/material";

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

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

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

const TextField = MuiTextField as unknown as FC<TextFieldProps>; // temporary fix ts(2590)

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

export const TextSpecialHorisontal = ({ currentQuestion, answer, stepNumber }: TextSpecialProps) => {
  const { settings } = useQuizStore();
  const { updateAnswer } = useQuizViewStore((state) => state);
  const isHorizontal = true;
  const theme = useTheme();
  const isMobile = useRootContainerSize() < 650;

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

  return (
    <Box
      sx={{
        display: "flex",
        flexDirection: isMobile ? "column" : undefined,
        alignItems: isMobile ? "center" : undefined,
      }}
    >
      <Box
        sx={{
          display: "flex",
          width: "100%",
          marginTop: "20px",
          flexDirection: "column",
          alignItems: "center",
          gap: "20px",
        }}
      >
        <Typography
          variant="h5"
          color={theme.palette.text.primary}
          sx={{ wordBreak: "break-word" }}
        >
          {currentQuestion.title}
        </Typography>
        {isHorizontal && currentQuestion.content.back && currentQuestion.content.back !== " " && (
          <Box
            sx={{ margin: "30px", width: "50vw", maxHeight: "550px" }}
            onClick={(event) => event.preventDefault()}
          >
            <img
              key={currentQuestion.id}
              src={currentQuestion.content.back}
              style={{ width: "100%", height: "100%", objectFit: "cover" }}
              alt=""
            />
          </Box>
        )}
        {
          <TextField
            autoFocus={true}
            multiline
            maxRows={4}
            placeholder={currentQuestion.content.placeholder}
            value={answer || ""}
            onChange={onInputChange}
            inputProps={{
              maxLength: 400,
              background: settings.cfg.design
                ? quizThemes[settings.cfg.theme].isLight
                  ? "#F2F3F7"
                  : "rgba(154,154,175, 0.2)"
                : "transparent",
            }}
            sx={{
              width: "100%",
              "& .MuiOutlinedInput-root": {
                backgroundColor: settings.cfg.design ? "rgba(154,154,175, 0.2)" : "#FFFFFF",
              },
              "&:focus-visible": {
                borderColor: theme.palette.primary.main,
              },
            }}
          />
        }
      </Box>
      {!isHorizontal && currentQuestion.content.back && currentQuestion.content.back !== " " && (
        <Box
          sx={{ margin: "15px", width: "40vw" }}
          onClick={(event) => event.preventDefault()}
        >
          <img
            key={currentQuestion.id}
            src={currentQuestion.content.back}
            style={{ width: "100%", height: "100%", objectFit: "cover" }}
            alt=""
          />
        </Box>
      )}
    </Box>
  );
};