From c86e5344abf875b28439d3371aa4ad3c8922459e Mon Sep 17 00:00:00 2001
From: IlyaDoronin <ryletd@gmail.com>
Date: Wed, 6 Dec 2023 17:23:48 +0300
Subject: [PATCH] feat: Slider TextFields logic

---
 .../ViewPublicationPage/questions/Number.tsx  | 116 ++++++++++++++----
 1 file changed, 94 insertions(+), 22 deletions(-)

diff --git a/src/pages/ViewPublicationPage/questions/Number.tsx b/src/pages/ViewPublicationPage/questions/Number.tsx
index 386a687e..9cdec8b8 100644
--- a/src/pages/ViewPublicationPage/questions/Number.tsx
+++ b/src/pages/ViewPublicationPage/questions/Number.tsx
@@ -14,16 +14,24 @@ type NumberProps = {
 export const Number = ({ currentQuestion }: NumberProps) => {
   const theme = useTheme();
   const { answers } = useQuizViewStore();
-  const { answer } = answers.find(({ questionId }) => questionId === currentQuestion.content.id) ?? {};
+  const { answer } =
+    answers.find(
+      ({ questionId }) => questionId === currentQuestion.content.id
+    ) ?? {};
 
   const min = window.Number(currentQuestion.content.range.split("—")[0]);
   const max = window.Number(currentQuestion.content.range.split("—")[1]);
 
   useEffect(() => {
     if (!answer) {
-      updateAnswer(currentQuestion.content.id, "1");
+      updateAnswer(
+        currentQuestion.content.id,
+        currentQuestion.content.chooseRange
+          ? `${currentQuestion.content.start},${max}`
+          : String(currentQuestion.content.start)
+      );
     }
-  }, []);
+  }, [answer]);
 
   return (
     <Box>
@@ -36,26 +44,90 @@ export const Number = ({ currentQuestion }: NumberProps) => {
           marginTop: "20px",
         }}
       >
-        <CustomTextField
-          placeholder="0"
-          value={answer || ""}
-          onChange={({ target }) => {
-            updateAnswer(
-              currentQuestion.content.id,
-              window.Number(target.value) > max
-                ? String(max)
-                : window.Number(target.value) < min
-                ? String(min)
-                : target.value
-            );
-          }}
-          sx={{
-            maxWidth: "80px",
-            "& .MuiInputBase-input": { textAlign: "center" },
-          }}
-        />
+        {!currentQuestion.content.chooseRange && (
+          <CustomTextField
+            placeholder="0"
+            value={
+              currentQuestion.content.chooseRange
+                ? answer?.split(",")[0]
+                : answer
+            }
+            onChange={({ target }) => {
+              updateAnswer(
+                currentQuestion.content.id,
+                window.Number(target.value) > max
+                  ? String(max)
+                  : window.Number(target.value) < min
+                  ? String(min)
+                  : target.value
+              );
+            }}
+            sx={{
+              maxWidth: "80px",
+              "& .MuiInputBase-input": { textAlign: "center" },
+            }}
+          />
+        )}
+        {currentQuestion.content.chooseRange && (
+          <Box
+            sx={{
+              display: "flex",
+              gap: "15px",
+              "& .MuiFormControl-root": { width: "auto" },
+            }}
+          >
+            <CustomTextField
+              placeholder="0"
+              value={
+                currentQuestion.content.chooseRange
+                  ? answer?.split(",")[0]
+                  : answer
+              }
+              onChange={({ target }) => {
+                updateAnswer(
+                  currentQuestion.content.id,
+                  window.Number(target.value) >
+                    window.Number(answer?.split(",")[1])
+                    ? `${answer?.split(",")[1]},${answer?.split(",")[1]}`
+                    : window.Number(target.value) < min
+                    ? `${min},${answer?.split(",")[1]}`
+                    : `${target.value},${answer?.split(",")[1]}`
+                );
+              }}
+              sx={{
+                maxWidth: "80px",
+                "& .MuiInputBase-input": { textAlign: "center" },
+              }}
+            />
+            <CustomTextField
+              placeholder="0"
+              value={answer?.split(",")[1]}
+              onChange={({ target }) => {
+                updateAnswer(
+                  currentQuestion.content.id,
+                  window.Number(target.value) > max
+                    ? `${answer?.split(",")[0]},${max}`
+                    : window.Number(target.value) <
+                      window.Number(answer?.split(",")[0])
+                    ? `${answer?.split(",")[0]},${answer?.split(",")[0]}`
+                    : `${answer?.split(",")[0]},${target.value}`
+                );
+              }}
+              sx={{
+                maxWidth: "80px",
+                "& .MuiInputBase-input": { textAlign: "center" },
+              }}
+            />
+          </Box>
+        )}
         <Slider
-          value={window.Number(answer || 1)}
+          value={
+            currentQuestion.content.chooseRange
+              ? answer?.split(",").length || 0 > 1
+                ? answer?.split(",").map((item) => window.Number(item))
+                : [min, min + 1]
+              : window.Number(answer || 1)
+          }
           min={min}
           max={max}
           step={currentQuestion.content.step || 1}