import { useState } from "react";
import { useParams } from "react-router-dom";
import { Box, Typography, useMediaQuery, useTheme } from "@mui/material";
import { useDebouncedCallback } from "use-debounce";
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";
import { ImageAddIcons } from "@icons/ImageAddIcons";
import { VideofileIcon } from "@icons/questionsPage/VideofileIcon";

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 debounced = useDebouncedCallback((value) => {
    const clonContent = listQuestions[quizId][totalIndex].content;
    clonContent.text = value;
    updateQuestionsList(quizId, totalIndex, { content: clonContent });
  }, 1000);

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

  return (
    <>
      <Box
        sx={{
          width: isTablet ? "auto" : "100%",
          maxWidth: "640px",
          display: "flex",
          px: "20px",
          flexDirection: "column",
          gap: isMobile ? "25px" : "20px",
        }}
      >
        <Box sx={{ display: disableInput ? "none" : "" }}>
          <CustomTextField
            placeholder={"Можно добавить текст"}
            text={listQuestions[quizId][totalIndex].content.text}
            onChange={({ target }) => debounced(target.value)}
          />
        </Box>
        <Box
          sx={{
            mb: "20px",
            ml: isTablet ? "0px" : "60px",
            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 />
            ) : (
              <Box
                sx={{
                  width: "60px",
                  height: "40px",
                  background: "#EEE4FC",
                  display: "flex",
                  justifyContent: "space-between",
                }}
              >
                <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>
            )}

            <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,
                });
              }
            }}
            // onClick={() => setOpenVideoModal(true)}
          />
          <Typography> или</Typography>
          <Box
            sx={{
              cursor: "pointer",
              display: "flex",
              alignItems: "center",
              gap: "10px",
            }}
          >
            {isMobile ? (
              <AddPlusVideo />
            ) : (
              <Box
                sx={{
                  width: "60px",
                  height: "40px",
                  background: "#EEE4FC",
                  display: "flex",
                  justifyContent: "space-between",
                }}
              >
                <Box sx={{ display: "flex", alignItems: "center", justifyContent: "center", width: "100%" }}>
                  <VideofileIcon 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>
            )}

            <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} />
    </>
  );
}