From 0962ff13306d5aa654ace0b76b91da11b9c3948b Mon Sep 17 00:00:00 2001
From: sosokker <sirin_29@hotmail.co.th>
Date: Fri, 17 Nov 2023 23:07:42 +0700
Subject: [PATCH] Add checked and range handler

---
 .../kanbanBoard/taskDetailModal.jsx           | 44 +++++++++++++++++--
 1 file changed, 40 insertions(+), 4 deletions(-)

diff --git a/frontend/src/components/kanbanBoard/taskDetailModal.jsx b/frontend/src/components/kanbanBoard/taskDetailModal.jsx
index adbf7f5..7c2247a 100644
--- a/frontend/src/components/kanbanBoard/taskDetailModal.jsx
+++ b/frontend/src/components/kanbanBoard/taskDetailModal.jsx
@@ -1,9 +1,23 @@
-import React from "react";
+import React, { useState } from "react";
 import { FaTasks, FaRegListAlt } from "react-icons/fa";
 import { FaPlus } from "react-icons/fa6";
 import { TbChecklist } from "react-icons/tb";
 
 function TaskDetailModal() {
+  const [difficulty, setDifficulty] = useState(50);
+  const [isChallengeChecked, setChallengeChecked] = useState(true);
+  const [isImportantChecked, setImportantChecked] = useState(true);
+
+  const handleChallengeChange = () => {
+    setChallengeChecked(!isChallengeChecked);
+  };
+
+  const handleImportantChange = () => {
+    setImportantChecked(!isImportantChecked);
+  };
+  const handleDifficultyChange = event => {
+    setDifficulty(parseInt(event.target.value, 10));
+  };
 
   return (
     <dialog id="task_detail_modal" className="modal">
@@ -64,7 +78,16 @@ function TaskDetailModal() {
         {/* Difficulty, Challenge and Importance */}
         <div className="flex flex-row space-x-3 my-4">
           <div className="flex-1 card shadow border-2 p-2">
-            <input type="range" id="difficultySelector" min={0} max="100" value="50" className="range" step="25" />
+            <input
+              type="range"
+              id="difficultySelector"
+              min={0}
+              max="100"
+              value={difficulty}
+              className="range"
+              step="25"
+              onChange={handleDifficultyChange}
+            />
             <div className="w-full flex justify-between text-xs px-2 space-x-2">
               <span>Easy</span>
               <span>Normal</span>
@@ -73,19 +96,32 @@ function TaskDetailModal() {
               <span>Devil</span>
             </div>
           </div>
+          {/* Challenge Checkbox */}
           <div className="card shadow border-2 p-2">
             <div className="form-control">
               <label className="label cursor-pointer space-x-2">
                 <span className="label-text">Challenge</span>
-                <input type="checkbox" checked="checked" className="checkbox" />
+                <input
+                  type="checkbox"
+                  checked={isChallengeChecked}
+                  className="checkbox"
+                  onChange={handleChallengeChange}
+                />
               </label>
             </div>
           </div>
+
+          {/* Important Checkbox */}
           <div className="card shadow border-2 p-2">
             <div className="form-control">
               <label className="label cursor-pointer space-x-2">
                 <span className="label-text">Important</span>
-                <input type="checkbox" checked="checked" className="checkbox" />
+                <input
+                  type="checkbox"
+                  checked={isImportantChecked}
+                  className="checkbox"
+                  onChange={handleImportantChange}
+                />
               </label>
             </div>
           </div>