frontPanel/src/pages/Questions/OptionsAndPicture/OptionsAndPicture.tsx

import { ImageAddIcons } from "@icons/ImageAddIcons";
import { MessageIcon } from "@icons/messagIcon";
import { PointsIcon } from "@icons/questionsPage/PointsIcon";
import { DeleteIcon } from "@icons/questionsPage/deleteIcon";
import {
  Box,
  IconButton,
  InputAdornment,
  Link,
  Popover,
  TextField,
  TextareaAutosize,
  Typography,
  useMediaQuery,
  useTheme,
} from "@mui/material";
import {
  addQuestionVariant,
  uploadQuestionImage,
} from "@root/questions/actions";
import { useCurrentQuiz } from "@root/quizes/hooks";
import AddOrEditImageButton from "@ui_kit/AddOrEditImageButton";
import { CropModal, useCropModalState } from "@ui_kit/Modal/CropModal";
import { useState } from "react";
import { useDisclosure } from "../../../utils/useDisclosure";
import { EnterIcon } from "../../../assets/icons/questionsPage/enterIcon";
import type { QuizQuestionVarImg } from "../../../model/questionTypes/varimg";
import { AnswerDraggableList } from "../AnswerDraggableList";
import ButtonsOptionsAndPict from "../ButtonsOptionsAndPict";
import { UploadImageModal } from "../UploadImage/UploadImageModal";
import SwitchOptionsAndPict from "./switchOptionsAndPict";

interface Props {
  question: QuizQuestionVarImg;
  openBranchingPage: boolean;
  setOpenBranchingPage: (a: boolean) => void;
}

export default function OptionsAndPicture({
  question,
  setOpenBranchingPage,
}: Props) {
  const [switchState, setSwitchState] = useState("setting");
  const [pictureUploding, setPictureUploading] = useState<boolean>(false);
  const [selectedVariantId, setSelectedVariantId] = useState<string | null>(
    null,
  );
  const theme = useTheme();
  const isTablet = useMediaQuery(theme.breakpoints.down(1000));
  const isMobile = useMediaQuery(theme.breakpoints.down(790));
  const quizQid = useCurrentQuiz()?.qid;
  const [isImageUploadOpen, openImageUploadModal, closeImageUploadModal] =
    useDisclosure();
  const {
    isCropModalOpen,
    openCropModal,
    closeCropModal,
    imageBlob,
    originalImageUrl,
    setCropModalImageBlob,
  } = useCropModalState();

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

  const handleImageUpload = async (file: File) => {
    if (!selectedVariantId) return;

    setPictureUploading(true);

    const url = await uploadQuestionImage(
      question.id,
      quizQid,
      file,
      (question, url) => {
        if (!("variants" in question.content)) return;

        const variant = question.content.variants.find(
          (variant) => variant.id === selectedVariantId,
        );
        if (!variant) return;

        variant.extendedText = url;
        variant.originalImageUrl = url;
      },
    );
    closeImageUploadModal();
    openCropModal(file, url);

    setPictureUploading(false);
  };

  function handleCropModalSaveClick(imageBlob: Blob) {
    if (!selectedVariantId) return;

    uploadQuestionImage(question.id, quizQid, imageBlob, (question, url) => {
      if (!("variants" in question.content)) return;

      const variant = question.content.variants.find(
        (variant) => variant.id === selectedVariantId,
      );
      if (!variant) return;

      variant.extendedText = url;
    });
  }

  return (
    <>
      <Box sx={{ pl: "20px", pr: "20px" }}>
        <AnswerDraggableList
          question={question}
          additionalContent={(variant) => (
            <>
              {!isMobile && (
                <AddOrEditImageButton
                  imageSrc={variant.extendedText}
                  uploading={pictureUploding}
                  onImageClick={() => {
                    setSelectedVariantId(variant.id);
                    if (variant.extendedText) {
                      return openCropModal(
                        variant.extendedText,
                        variant.originalImageUrl,
                      );
                    }

                    openImageUploadModal();
                  }}
                  onPlusClick={() => {
                    setSelectedVariantId(variant.id);
                    openImageUploadModal();
                  }}
                  sx={{ mx: "10px" }}
                />
              )}
            </>
          )}
          additionalMobile={(variant) => (
            <>
              {isMobile && (
                <AddOrEditImageButton
                  imageSrc={variant.extendedText}
                  uploading={pictureUploding}
                  onImageClick={() => {
                    setSelectedVariantId(variant.id);
                    if (variant.extendedText) {
                      return openCropModal(
                        variant.extendedText,
                        variant.originalImageUrl,
                      );
                    }

                    openImageUploadModal();
                  }}
                  onPlusClick={() => {
                    setSelectedVariantId(variant.id);
                    openImageUploadModal();
                  }}
                  sx={{ m: "8px", width: "auto" }}
                />
              )}
            </>
          )}
        />
        <UploadImageModal
          isOpen={isImageUploadOpen}
          onClose={closeImageUploadModal}
          handleImageChange={handleImageUpload}
        />
        <CropModal
          isOpen={isCropModalOpen}
          imageBlob={imageBlob}
          originalImageUrl={originalImageUrl}
          setCropModalImageBlob={setCropModalImageBlob}
          onClose={closeCropModal}
          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={() => {
              addQuestionVariant(question.id);
            }}
          >
            Добавьте ответ
          </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}
        question={question}
        setOpenBranchingPage={setOpenBranchingPage}
      />
      <SwitchOptionsAndPict switchState={switchState} question={question} />
    </>
  );
}