import {
  Box,
  Link,
  Typography,
  useTheme,
  useMediaQuery,
  InputAdornment,
  IconButton,
  Button,
  Popover,
  TextareaAutosize,
  TextField,
} from "@mui/material";
import { useState } from "react";
import { useParams } from "react-router-dom";

import { CropModal } from "@ui_kit/Modal/CropModal";
import { AnswerDraggableList } from "../AnswerDraggableList";
import { UploadImageModal } from "../UploadImage/UploadImageModal";

import { ImageAddIcons } from "@icons/ImageAddIcons";
import { MessageIcon } from "@icons/messagIcon";
import { PointsIcon } from "@icons/questionsPage/PointsIcon";
import { DeleteIcon } from "@icons/questionsPage/deleteIcon";
import { questionStore, setVariantImageUrl, setVariantOriginalImageUrl, updateQuestionsList } from "@root/questions";
import { EnterIcon } from "../../../assets/icons/questionsPage/enterIcon";
import ButtonsOptionsAndPict from "../ButtonsOptionsAndPict";
import SwitchOptionsAndPict from "./switchOptionsAndPict";

import { openCropModal } from "@root/cropModal";
import AddOrEditImageButton from "@ui_kit/AddOrEditImageButton";
import type { QuizQuestionVarImg } from "../../../model/questionTypes/varimg";

interface Props {
  totalIndex: number;
}

export default function OptionsAndPicture({ totalIndex }: Props) {
    const [isUploadImageModalOpen, setIsUploadImageModalOpen] = useState(false);
    const [switchState, setSwitchState] = useState("setting");
    const [currentIndex, setCurrentIndex] = useState<number>(0);
    const quizId = Number(useParams().quizId);
    const { listQuestions } = questionStore();
    const theme = useTheme();
    const isTablet = useMediaQuery(theme.breakpoints.down(1000));
    const isMobile = useMediaQuery(theme.breakpoints.down(790));
    const question = listQuestions[quizId][totalIndex] as QuizQuestionVarImg;

  const SSHC = (data: string) => {
    setSwitchState(data);
  };

    const handleImageUpload = (files: FileList | null) => {
        if (!files?.length) return;

        const [file] = Array.from(files);
        const url = URL.createObjectURL(file);

        setVariantImageUrl(quizId, totalIndex, currentIndex, url);
        setVariantOriginalImageUrl(quizId, totalIndex, currentIndex, url);
        setIsUploadImageModalOpen(false);
        openCropModal(url, url);
    };

    function handleCropModalSaveClick(url: string) {
        setVariantImageUrl(quizId, totalIndex, currentIndex, url);
    }

    return (
      <>
      <Box sx={{ pl: "20px", pr: "20px" }}>
          <AnswerDraggableList
              variants={question.content.variants}
              question={totalIndex}
              additionalContent={(variant, index) => (
                  <>
                      {!isMobile && (
                          <AddOrEditImageButton
                              imageSrc={variant.extendedText}
                              onImageClick={() => {
                                  if (!("originalImageUrl" in variant)) return;

                                  setCurrentIndex(index);
                                  if (variant.extendedText) return openCropModal(
                                      variant.extendedText,
                                      variant.originalImageUrl
                                  );

                                  setIsUploadImageModalOpen(true);
                              }}
                              onPlusClick={() => {
                                  setCurrentIndex(index);
                                  setIsUploadImageModalOpen(true);
                              }}
                              sx={{ mx: "10px" }}
                          />
                      )}
                  </>
              )}
              additionalMobile={(variant, index) => (
                  <>
                      {isMobile && (
                          <AddOrEditImageButton
                              imageSrc={variant.extendedText}
                              onImageClick={() => {
                                  if (!("originalImageUrl" in variant)) return;

                                  setCurrentIndex(index);
                                  if (variant.extendedText) return openCropModal(
                                      variant.extendedText,
                                      variant.originalImageUrl
                                  );

                                  setIsUploadImageModalOpen(true);
                              }}
                              onPlusClick={() => {
                                  setCurrentIndex(index);
                                  setIsUploadImageModalOpen(true);
                              }}
                              sx={{ m: "8px", width: "auto" }}
                          />
                      )}
                  </>
              )}
          />
          <UploadImageModal
              open={isUploadImageModalOpen}
              onClose={() => setIsUploadImageModalOpen(false)}
              imgHC={handleImageUpload}
          />
          <CropModal onSaveImageClick={handleCropModalSaveClick} />
          <Box
              sx={{
                  width: "100%",
                  border: "1px solid #9A9AAF",
                  borderRadius: "8px",
                  display: isTablet ? "block" : "none",
              }}
          >
              <TextField
                  fullWidth
                  focused={false}
                  placeholder={"Добавьте ответ"}
                  multiline={question.content.largeCheck}
                  InputProps={{
                      startAdornment: (
                          <>
                              <InputAdornment position="start">
                                  <PointsIcon
                                      style={{ color: "#9A9AAF", fontSize: "30px" }}
                                  />
                              </InputAdornment>
                              {!isMobile && (
                                  <Box
                                      sx={{
                                          width: "60px",
                                          height: "40px",
                                          background: "#EEE4FC",
                                          display: "flex",
                                          justifyContent: "space-between",
                                          marginRight: "20px",
                                          marginLeft: "12px",
                                      }}
                                  >
                                      <Box
                                          sx={{
                                              display: "flex",
                                              alignItems: "center",
                                              justifyContent: "center",
                                              width: "100%",
                                          }}
                                      >
                                          <ImageAddIcons fontSize="22px" color="#7E2AEA" />
                                      </Box>
                                      <span
                                          style={{
                                              display: "flex",
                                              alignItems: "center",
                                              justifyContent: "center",
                                              background: "#7E2AEA",
                                              height: "100%",
                                              width: "25px",
                                              color: "white",
                                              fontSize: "15px",
                                          }}
                                      >
                                          +
                                      </span>
                                  </Box>
                              )}
                          </>
                      ),
                      endAdornment: (
                          <InputAdornment position="end">
                              <IconButton
                                  sx={{ padding: "0" }}
                                  aria-describedby="my-popover-id"
                              >
                                  <MessageIcon
                                      style={{
                                          color: "#9A9AAF",
                                          fontSize: "30px",
                                          marginRight: "6.5px",
                                      }}
                                  />
                              </IconButton>
                              <Popover
                                  id="my-popover-id"
                                  anchorOrigin={{ vertical: "bottom", horizontal: "left" }}
                                  open={false}
                              >
                                  <TextareaAutosize
                                      style={{ margin: "10px" }}
                                      placeholder="Подсказка для этого ответа"
                                  />
                              </Popover>
                              <IconButton sx={{ padding: "0" }}>
                                  <DeleteIcon
                                      style={{
                                          color: theme.palette.grey2.main,
                                          marginRight: "-1px",
                                      }}
                                  />
                              </IconButton>
                          </InputAdornment>
                      ),
                  }}
                  sx={{
                      "& .MuiInputBase-root": {
                          padding: "13.5px",
                          borderRadius: "10px",
                          background: "#ffffff",
                          height: "48px",
                      },
                      "& .MuiOutlinedInput-notchedOutline": {
                          border: "none",
                      },
                  }}
                  inputProps={{
                      sx: { fontSize: "18px", lineHeight: "21px", py: 0 },
                  }}
              />

              {isMobile && (
                  <Box
                      sx={{
                          display: "flex",
                          alignItems: "center",
                          m: "8px",
                          position: "relative",
                      }}
                  >
                      <Box
                          sx={{ width: "100%", background: "#EEE4FC", height: "40px" }}
                      />
                      <ImageAddIcons
                          style={{
                              position: "absolute",
                              color: "#7E2AEA",
                              fontSize: "20px",
                              left: "45%",
                              right: "55%",
                          }}
                      />
                      <Box
                          sx={{
                              display: "flex",
                              justifyContent: "center",
                              alignItems: "center",
                              width: "20px",
                              background: "#EEE4FC",
                              height: "40px",
                              color: "white",
                              backgroundColor: "#7E2AEA",
                          }}
                      >
                          <Box
                              sx={{ width: "100%", background: "#EEE4FC", height: "40px" }}
                          />
                          <ImageAddIcons
                              style={{
                                  position: "absolute",
                                  color: "#7E2AEA",
                                  fontSize: "20px",
                                  left: "45%",
                                  right: "55%",
                              }}
                          />
                          <Box
                              sx={{
                                  display: "flex",
                                  justifyContent: "center",
                                  alignItems: "center",
                                  width: "20px",
                                  background: "#EEE4FC",
                                  height: "40px",
                                  color: "white",
                                  backgroundColor: "#7E2AEA",
                              }}
                          >
                              +
                          </Box>
                      </Box>
                  </Box>
              )}
          </Box>
          <Box
              sx={{
                  display: "flex",
                  alignItems: "center",
                  marginBottom: "17px",
              }}
          >
              <Link
                  component="button"
                  variant="body2"
                  sx={{
                      color: theme.palette.brightPurple.main,
                      fontWeight: "400",
                      fontSize: "16px",
                      mr: "4px",
                      height: "19px",
                  }}
                  onClick={() => {
                      const clonedContent = { ...question.content };
                      clonedContent.variants.push({
                          answer: "",
                          hints: "",
                          extendedText: "",
                          originalImageUrl: "",
                      });
                      updateQuestionsList<QuizQuestionVarImg>(quizId, totalIndex, {
                          content: clonedContent,
                      });
                  }}
              >
                  Добавьте ответ
              </Link>
              {isMobile ? null : (
                  <>
                      <Typography
                          sx={{
                              fontWeight: 400,
                              lineHeight: "21.33px",
                              color: theme.palette.grey2.main,
                              fontSize: "16px",
                          }}
                      >
                          или нажмите Enter
                      </Typography>
                      <EnterIcon
                          style={{
                              color: "#7E2AEA",
                              fontSize: "24px",
                              marginLeft: "6px",
                          }}
                      />
                  </>
              )}
          </Box>
      </Box>
      <ButtonsOptionsAndPict
          switchState={switchState}
          SSHC={SSHC}
          totalIndex={totalIndex}
      />
      <SwitchOptionsAndPict switchState={switchState} totalIndex={totalIndex} />
  </>

  );
}