From 297106bf57dbcad0ad99bb0f5adf1651ca75da33 Mon Sep 17 00:00:00 2001
From: tnsprasanna <tnsprasanna1@gmail.com>
Date: Sat, 5 Oct 2024 12:00:35 -0400
Subject: [PATCH] days state changes

---
 .../src/components/pages/tasks/TaskModal.tsx  | 43 +++++++++++++++++--
 1 file changed, 40 insertions(+), 3 deletions(-)

diff --git a/frontend/src/components/pages/tasks/TaskModal.tsx b/frontend/src/components/pages/tasks/TaskModal.tsx
index 36be3fa..0a159b5 100644
--- a/frontend/src/components/pages/tasks/TaskModal.tsx
+++ b/frontend/src/components/pages/tasks/TaskModal.tsx
@@ -47,6 +47,9 @@ const TaskModal = ({ isOpen, setIsOpen }: Props): React.ReactElement => {
   const [taskType, setTaskType] = useState("");
   const [recurrence, setRecurrence] = useState("");
   const [marillacBucks, setMarillacBucks] = useState("");
+  const [selectedDays, setSelectedDays] = useState<string[]>([]);
+
+  const days = ["Su", "M", "Tu", "W", "Th", "F", "Sa"];
 
   const [title, setTitle] = useState("");
   const [location, setLocation] = useState("");
@@ -77,6 +80,7 @@ const TaskModal = ({ isOpen, setIsOpen }: Props): React.ReactElement => {
 
     setSubmitPressed(false);
   };
+  
 
   const handleMoneyInput = () => {
     const inputValue = marillacBucks.replace(/[^0-9.]/g, ""); // Remove non-numeric and non-period characters
@@ -90,6 +94,14 @@ const TaskModal = ({ isOpen, setIsOpen }: Props): React.ReactElement => {
   // delete task api stuff
   const handleDelete = () => {};
 
+  const selectDay = (day: string) => {
+    if ((selectedDays).includes(day)) {
+      setSelectedDays(selectedDays.filter((d) => d !== day));
+    } else {
+      setSelectedDays([...selectedDays, day]);
+    }
+  }
+
   return (
     <ModalContainer
       title="Edit Chore"
@@ -145,9 +157,34 @@ const TaskModal = ({ isOpen, setIsOpen }: Props): React.ReactElement => {
        
        
        <Flex flexDir="row">
-          <h6>Select Days:</h6>
+          <h6 style={{ marginTop: '15x' }}>Select Days:</h6>
+
+          {days.map((day, index) => (
+            <Button
+              key={day}
+              // text colour (based on if day is selected)
+              color={selectedDays.includes(day) ? "white" : "gray"}
+              backgroundColor={selectedDays.includes(day) ? "#56469c" : "transparent"}
+              // if button is clicked, calls selectDay on day
+              onClick={() => selectDay(day)}
+              // hover style based on if day is selected
+              _hover={{ bg: selectedDays.includes(day) ? "#56469c" : "#e2e2e2", color: selectedDays.includes(day) ? "white" : "gray" }}
+              // same styling as before
+              style={{
+                padding: "4px",
+                width: "30px",
+                borderRadius: "50%",
+                // top: "-10px",
+                // left: `${(index + 1) * 10}px`
+                margin: "0 5px"
+              }}
+            >
+              {day}
+            </Button>
+          ))}
           
-          <Button color="gray"_hover={{bg: "#56469c", color: "white"}}
+          
+          {/* <Button color="gray"_hover={{bg: "#56469c", color: "white"}}
           style={{
             padding: "4px",
             width: "20px",               
@@ -209,7 +246,7 @@ const TaskModal = ({ isOpen, setIsOpen }: Props): React.ReactElement => {
             top: "-10px",
             left: "70px"
           }}
-          >S</Button>
+          >S</Button> */}
         </Flex>
 
         <Flex flexDir='column'>