fix: variants and pictures

src/pages/Questions/OptionsAndPicture/OptionsAndPicture.tsx

@@ -1,47 +1,85 @@
-import { Box, Link, Typography, useTheme } from "@mui/material";
+import { Box, Link, Typography, ButtonBase, useTheme } from "@mui/material";
 import AddImage from "../../../assets/icons/questionsPage/addImage";
 import EnterIcon from "../../../assets/icons/questionsPage/enterIcon";
 import ButtonsOptionsAndPict from "../ButtonsOptionsAndPict";
 import SwitchOptionsAndPict from "./switchOptionsAndPict";
 import React from "react";
+import { questionStore, updateQuestionsList } from "@root/questions";
 
 interface Props {
   totalIndex: number;
 }
 
 export default function OptionsAndPicture({ totalIndex }: Props) {
-  const theme = useTheme();
   const [switchState, setSwitchState] = React.useState("setting");
+  const { listQuestions } = questionStore();
+  const theme = useTheme();
   const SSHC = (data: string) => {
     setSwitchState(data);
   };
+
   return (
     <>
       <Box sx={{ padding: "20px" }}>
-        <Box
-          sx={{ display: "flex", alignItems: "center", paddingBottom: "25px" }}
-        >
-          <AddImage />
-          <Typography
-            sx={{
-              padding: "0 0 0 20px",
-              fontWeight: 400,
-              fontSize: "18px",
-              lineHeight: "21.33px",
-              color: theme.palette.grey2.main,
-            }}
-          >
-            Добавьте ответ
-          </Typography>
+        <Box sx={{ paddingBottom: "25px" }}>
+          {listQuestions[totalIndex].content.variants.map((_, index) => (
+            <ButtonBase
+              component="label"
+              sx={{
+                cursor: "pointer",
+                display: "flex",
+                alignItems: "center",
+                justifyContent: "flex-start",
+                marginBottom: "15px",
+              }}
+            >
+              <input
+                onChange={({ target }) => {
+                  if (target.files?.length) {
+                    const clonContent = listQuestions[totalIndex].content;
+
+                    clonContent.variants[index].answer = URL.createObjectURL(
+                      target.files[0]
+                    );
+
+                    updateQuestionsList(totalIndex, { content: clonContent });
+                  }
+                }}
+                hidden
+                accept="image/*"
+                multiple
+                type="file"
+              />
+              <AddImage />
+              <Typography
+                sx={{
+                  padding: "0 0 0 20px",
+                  fontWeight: 400,
+                  fontSize: "18px",
+                  lineHeight: "21.33px",
+                  color: theme.palette.grey2.main,
+                }}
+              >
+                Добавьте ответ
+              </Typography>
+            </ButtonBase>
+          ))}
         </Box>
         <Box sx={{ display: "flex", alignItems: "center", gap: "10px" }}>
           <Link
             component="button"
             variant="body2"
             sx={{ color: theme.palette.brightPurple.main }}
-            // onClick={() => {
-            //     console.info("I'm a button.");
-            // }}
+            onClick={() => {
+              const clonContent = listQuestions[totalIndex].content;
+              clonContent.variants.push({
+                answer: "",
+                answerLong: "",
+                hints: "",
+              });
+
+              updateQuestionsList(totalIndex, { content: clonContent });
+            }}
           >
             Добавьте ответ
           </Link>