import { useState } from "react";
import { useParams } from "react-router-dom";
import { Box, Typography, useMediaQuery, useTheme } from "@mui/material";
import ButtonsOptions from "../ButtonsOptions";
import CustomTextField from "@ui_kit/CustomTextField";
import AddImage from "../../../assets/icons/questionsPage/addImage";
import AddVideofile from "../../../assets/icons/questionsPage/addVideofile";
import SwitchPageOptions from "./switchPageOptions";
import { questionStore, updateQuestionsList } from "@root/questions";
import { UploadImageModal } from "../UploadImage/UploadImageModal";
import { UploadVideoModal } from "../UploadVideoModal";
import { AddPlusImage } from "@icons/questionsPage/addPlusImage";
import { AddPlusVideo } from "@icons/questionsPage/addPlusVideo";

type Props = {
  disableInput?: boolean;
  totalIndex: number;
};

export default function PageOptions({ disableInput, totalIndex }: Props) {
  const [openImageModal, setOpenImageModal] = useState<boolean>(false);
  const [openVideoModal, setOpenVideoModal] = useState<boolean>(false);
  const [switchState, setSwitchState] = useState("setting");
  const quizId = Number(useParams().quizId);
  const { listQuestions } = questionStore();
  const theme = useTheme();
  const isTablet = useMediaQuery(theme.breakpoints.down(980));
  const isMobile = useMediaQuery(theme.breakpoints.down(780));

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

  return (
    <>
      <Box
        sx={{
          width: isTablet ? "auto" : "100%",
          maxWidth: "640px",
          display: "flex",
          padding: "20px",
          flexDirection: "column",
          gap: "20px",
        }}
      >
        <Box sx={{ display: disableInput ? "none" : "" }}>
          <CustomTextField
            placeholder={"Можно добавить текст"}
            text={listQuestions[quizId][totalIndex].content.text}
            onChange={({ target }) => {
              const clonContent = listQuestions[quizId][totalIndex].content;
              clonContent.text = target.value;
              updateQuestionsList(quizId, totalIndex, { content: clonContent });
            }}
          />
        </Box>
        <Box
          sx={{ display: "flex", alignItems: "center", gap: "12px", justifyContent: isMobile ? "space-between" : null }}
        >
          <Box
            onClick={() => setOpenImageModal(true)}
            sx={{
              cursor: "pointer",
              display: "flex",
              alignItems: "center",
              gap: "10px",
            }}
          >
            {isMobile ? <AddPlusImage /> : <AddImage />}

            <Typography
              sx={{
                display: isMobile ? "none" : "block",
                fontWeight: 400,
                fontSize: "16px",
                lineHeight: "18.96px",
                color: theme.palette.grey2.main,
              }}
            >
              Изображение
            </Typography>
          </Box>
          <UploadImageModal
            open={openImageModal}
            onClose={() => setOpenImageModal(false)}
            imgHC={(fileList) => {
              if (fileList?.length) {
                const clonContent = listQuestions[quizId][totalIndex].content;
                clonContent.picture = URL.createObjectURL(fileList[0]);
                updateQuestionsList(quizId, totalIndex, {
                  content: clonContent,
                });
              }
            }}
          />
          <Typography> или</Typography>
          <Box
            onClick={() => setOpenVideoModal(true)}
            sx={{
              cursor: "pointer",
              display: "flex",
              alignItems: "center",
              gap: "10px",
            }}
          >
            {isMobile ? <AddPlusVideo /> : <AddVideofile />}

            <Typography
              sx={{
                display: isMobile ? "none" : "block",
                fontWeight: 400,
                fontSize: "16px",
                lineHeight: "18.96px",
                color: theme.palette.grey2.main,
              }}
            >
              Видео
            </Typography>
          </Box>
          <UploadVideoModal
            open={openVideoModal}
            onClose={() => setOpenVideoModal(false)}
            video={listQuestions[quizId][totalIndex].content.video}
            onUpload={(url) => {
              const clonContent = listQuestions[quizId][totalIndex].content;
              clonContent.video = url;
              updateQuestionsList(quizId, totalIndex, { content: clonContent });
            }}
          />
        </Box>
      </Box>
      <ButtonsOptions switchState={switchState} SSHC={SSHC} totalIndex={totalIndex} />
      <SwitchPageOptions switchState={switchState} totalIndex={totalIndex} />
    </>
  );
}