import React, { useState, useEffect, useContext } from "react";
import {
  StyleSheet,
  View,
  Text,
  TextInput as Input,
  TouchableOpacity,
  Keyboard,
  ScrollView,
} from "react-native";
import Modal from "react-native-modal";
import { Button, useTheme } from "react-native-paper";
import DateTimePicker from "@react-native-community/datetimepicker";
import { Calendar } from "react-native-calendars";
import Icon from "react-native-vector-icons/FontAwesome5";
import { MaterialCommunityIcons } from "react-native-vector-icons";

import AsyncStorage from "@react-native-async-storage/async-storage";
import { v4 as uuidv4 } from "uuid";

import { TaskContext } from "../context/storage/tasks/taskContext";
import { ClassContext } from "../context/storage/classes/classContext";

export default function NewTask(props) {
  const { colors } = useTheme();
  const { dispatch } = useContext(TaskContext);
  const { contextClasses } = useContext(ClassContext);

  useEffect(() => {
    Object.keys(contextClasses).forEach((key) => {
      console.log(contextClasses[key]["className"]);
    });
    console.log("Classes swaggie");
  }, []);

  const resetTaskModal = () => {
    setTaskModalVis(false);
    setTaskTitle("");
    setTaskDesc("");
    setTaskPriority(0);
    setMarkedDates({});
    setTaskTime(new Date());
    setTaskDateTimeArr([]);
    setTaskTags({
      userTags: {},
      classTags: {},
      termTags: {},
    });
  };

  const [taskModalVis, setTaskModalVis] = useState(props.shown);
  useEffect(() => {
    setTaskModalVis(props.shown);
  }, [props.shown]);

  const [taskTitle, setTaskTitle] = useState("");

  const [taskScheduleVis, setTaskScheduleVis] = useState(false);
  const [taskScheduleClicked, setTaskScheduleClicked] = useState(false);
  const [markedDates, setMarkedDates] = useState({});
  const selectDate = (day) => {
    if (day !== undefined) {
      if (markedDates[day.dateString]) {
        let deleteDates = { ...markedDates };
        delete deleteDates[day.dateString];
        setMarkedDates(deleteDates);
      } else {
        setMarkedDates((markedDates) => ({
          ...markedDates,
          [day.dateString]: { selected: true },
        }));
        console.log(markedDates);
      }
    }
  };
  const [taskTime, setTaskTime] = useState(new Date());
  const setScheduleTime = (e, time) => {
    if (time !== undefined) {
      console.log(
        time.toLocaleTimeString([], {
          hour: "2-digit",
          minute: "2-digit",
        })
      );
      setTaskTime(time);
    }
  };
  const [taskDateTimeArr, setTaskDateTimeArr] = useState([]);
  const addNewSchedule = async () => {
    Object.keys(markedDates).forEach((key) => {
      var taskSchedule = {
        date: key,
        time: taskTime,
        id: uuidv4(),
      };
      setTaskDateTimeArr((taskDateTimeArr) => [
        ...taskDateTimeArr,
        taskSchedule,
      ]);
    });
    setTaskScheduleVis(false);
  };

  const resetTaskSchedule = () => {
    setTaskScheduleVis(false);
    setMarkedDates({});
    setTaskTime(new Date());
  };

  const [taskPriority, setTaskPriority] = useState(0);
  const [taskPriorityModalVis, setTaskPriorityModalVis] = useState(false);

  const [taskDesc, setTaskDesc] = useState("");
  const [taskDescModalVis, setTaskDescModalVis] = useState(false);

  const [taskTags, setTaskTags] = useState({
    userTags: {},
    classTags: {},
    termTags: {},
  });
  const [newTag, setNewTag] = useState("");
  const addNewTag = (tagType, name = "none", id = "none") => {
    if (name !== "none" && id !== "none") {
      console.log("cond1");
      setTaskTags((taskTags) => ({
        ...taskTags,
        [tagType]: {
          ...taskTags[tagType],
          [name]: id,
        },
      }));
    } else {
      console.log("cond2");
      setTaskTags((taskTags) => ({
        ...taskTags,
        userTags: {
          ...taskTags.userTags,
          [newTag]: uuidv4(),
        },
      }));
    }
    setNewTag("");
  };

  const [taskTagModalVis, setTaskTagModalVis] = useState(false);

  const taskModalFuncView = (view) => {
    switch (view) {
      case "TASK_PRIORITY":
        setTaskDescModalVis(false);
        setTaskTagModalVis(false);
        setTaskPriorityModalVis(!taskPriorityModalVis);
        return;
      case "TASK_DESC":
        setTaskPriorityModalVis(false);
        setTaskTagModalVis(false);
        setTaskDescModalVis(!taskDescModalVis);
        return;
      case "TASK_TAG":
        setTaskPriorityModalVis(false);
        setTaskDescModalVis(false);
        setTaskTagModalVis(!taskTagModalVis);
        return;
      default:
        setTaskPriorityModalVis(false);
        setTaskDescModalVis(false);
        setTaskTagModalVis(false);
        return;
    }
  };

  const addNewTask = () => {
    dispatch({
      type: "ADD_TASK",
      task: {
        taskTitle,
        taskDateTimeArr,
        taskPriority,
        taskDesc,
        taskTags,
      },
    });
    Keyboard.dismiss();
    resetTaskModal();
  };

  return (
    <>
      {/* new task modal */}
      <Modal
        isVisible={taskModalVis}
        avoidKeyboard={true}
        hasBackdrop={true}
        backdropColor="black"
        onModalHide={() => {
          if (taskScheduleClicked == true) {
            setTaskScheduleVis(true);
            setTaskScheduleClicked(false);
          }
        }}
        style={{
          margin: 0,
        }}
      >
        <View
          style={{
            flex: 1,
            justifyContent: "flex-end",
          }}
        >
          <View style={{ flex: 1, marginTop: "13.3%" }}>
            {taskPriorityModalVis && (
              <View
                style={{
                  borderWidth: 1,
                  borderTopLeftRadius: 16,
                  borderTopRightRadius: 16,
                  borderBottomLeftRadius: 16,
                  borderBottomRightRadius: 16,
                  borderColor: colors.secondaryDarker,
                  marginHorizontal: 25,
                }}
              >
                <View
                  style={{
                    display: "flex",
                    flexDirection: "row",
                    padding: 12,
                    paddingBottom: 8,
                    alignItems: "baseline",
                    justifyContent: "center",
                    borderColor: colors.secondaryDarker,
                    borderBottomWidth: 1,
                    backgroundColor: colors.secondary,
                    borderTopLeftRadius: 15,
                    borderTopRightRadius: 15,
                  }}
                >
                  <TouchableOpacity
                    style={{ marginRight: "auto" }}
                    onPress={() => {
                      Keyboard.dismiss();
                      setTaskPriorityModalVis(false);
                    }}
                  >
                    <Text
                      style={{
                        color: colors.primary,
                        fontWeight: "bold",
                        fontSize: 16,
                        width: 50,
                      }}
                    >
                      Close
                    </Text>
                  </TouchableOpacity>

                  <View style={{ marginRight: "auto" }}>
                    <Text
                      style={{
                        color: colors.primary,
                        fontWeight: "bold",
                        fontSize: 24,
                        position: "relative",
                        margin: "auto",
                        left: -20,
                      }}
                    >
                      Set Priority
                    </Text>
                  </View>
                </View>

                <TouchableOpacity
                  style={{
                    display: "flex",
                    flexDirection: "row",
                    alignItems: "baseline",
                    justifyContent: "space-between",
                    padding: 8,
                    paddingHorizontal: 16,
                    backgroundColor:
                      taskPriority == 1 ? colors.secondary : "#fff",
                  }}
                  onPress={() => {
                    setTaskPriority(1);
                  }}
                >
                  <Text style={{ fontSize: 18 }}>Low (default)</Text>
                  <MaterialCommunityIcons
                    name="star"
                    size={24}
                    color={colors.secondaryDarker}
                  />
                </TouchableOpacity>
                <TouchableOpacity
                  style={{
                    display: "flex",
                    flexDirection: "row",
                    alignItems: "baseline",
                    justifyContent: "space-between",
                    padding: 8,
                    paddingHorizontal: 16,
                    backgroundColor:
                      taskPriority == 2 ? colors.yellowAccent : "#fff",
                  }}
                  onPress={() => {
                    setTaskPriority(2);
                  }}
                >
                  <Text style={{ fontSize: 18 }}>Medium</Text>
                  <MaterialCommunityIcons
                    name="star"
                    size={24}
                    color={colors.yellow}
                  />
                </TouchableOpacity>
                <TouchableOpacity
                  style={{
                    display: "flex",
                    flexDirection: "row",
                    alignItems: "baseline",
                    justifyContent: "space-between",
                    padding: 8,
                    paddingHorizontal: 16,
                    backgroundColor:
                      taskPriority == 3 ? colors.background : "#fff",
                  }}
                  onPress={() => {
                    setTaskPriority(3);
                  }}
                >
                  <Text style={{ fontSize: 18 }}>High</Text>
                  <MaterialCommunityIcons
                    name="star"
                    size={24}
                    color={colors.primary}
                  />
                </TouchableOpacity>
                <TouchableOpacity
                  style={{
                    display: "flex",
                    flexDirection: "row",
                    alignItems: "baseline",
                    justifyContent: "space-between",
                    padding: 8,
                    paddingBottom: 12,
                    paddingHorizontal: 16,
                    backgroundColor:
                      taskPriority == 4 ? colors.redAccent : "#fff",
                    borderBottomRightRadius: 15,
                    borderBottomLeftRadius: 15,
                  }}
                  onPress={() => {
                    setTaskPriority(4);
                  }}
                >
                  <Text style={{ fontSize: 18 }}>Critical</Text>
                  <MaterialCommunityIcons
                    name="star"
                    size={24}
                    color={colors.red}
                  />
                </TouchableOpacity>
              </View>
            )}

            {taskDescModalVis && (
              <View
                style={{
                  borderWidth: 1,
                  borderTopLeftRadius: 16,
                  borderTopRightRadius: 16,
                  borderBottomLeftRadius: 16,
                  borderBottomRightRadius: 16,
                  borderColor: colors.secondaryDarker,
                  backgroundColor: "#fff",
                  marginHorizontal: 25,
                }}
              >
                <View
                  style={{
                    display: "flex",
                    flexDirection: "row",
                    alignItems: "baseline",
                    justifyContent: "space-between",
                    backgroundColor: colors.secondary,
                    borderTopRightRadius: 15,
                    borderTopLeftRadius: 15,
                    padding: 12,
                    paddingBottom: 8,
                  }}
                >
                  <TouchableOpacity
                    onPress={() => {
                      setTaskDescModalVis(false);
                      setTaskDesc("");
                    }}
                  >
                    <Text
                      style={{
                        color: colors.primary,
                        fontWeight: "bold",
                        fontSize: 16,
                      }}
                    >
                      Close
                    </Text>
                  </TouchableOpacity>
                  <View>
                    <Text
                      style={{
                        color: colors.primary,
                        fontWeight: "bold",
                        fontSize: 24,
                      }}
                    >
                      Description
                    </Text>
                  </View>
                  <TouchableOpacity
                    onPress={() => {
                      setTaskDescModalVis(false);
                      console.log("Added description");
                    }}
                  >
                    <Text
                      style={{
                        color: colors.primary,
                        fontWeight: "bold",
                        fontSize: 16,
                      }}
                    >
                      Save
                    </Text>
                  </TouchableOpacity>
                </View>

                <View style={{ padding: 16, paddingBottom: 22 }}>
                  <Input
                    placeholder="Enter description here"
                    autoCorrect={false}
                    multiline={true}
                    autoFocus={true}
                    value={taskDesc}
                    onChangeText={(text) => setTaskDesc(text)}
                  />
                </View>
              </View>
            )}

            {taskTagModalVis && (
              <View
                style={{
                  borderWidth: 1,
                  borderTopLeftRadius: 16,
                  borderTopRightRadius: 16,
                  borderBottomRightRadius: 16,
                  borderBottomLeftRadius: 16,
                  borderColor: colors.secondaryDarker,
                  backgroundColor: "#fff",
                  marginHorizontal: 25,
                }}
              >
                <View
                  style={{
                    display: "flex",
                    flexDirection: "row",
                    alignItems: "baseline",
                    justifyContent: "space-between",
                    backgroundColor: colors.secondary,
                    borderTopRightRadius: 15,
                    borderTopLeftRadius: 15,
                    padding: 12,
                    paddingBottom: 8,
                  }}
                >
                  <TouchableOpacity
                    onPress={() => {
                      setTaskTagModalVis(false);
                      setTaskTags({
                        userTags: {},
                        classTags: {},
                        termTags: {},
                      });
                    }}
                  >
                    <Text
                      style={{
                        color: colors.primary,
                        fontWeight: "bold",
                        fontSize: 16,
                        width: 50,
                      }}
                    >
                      Close
                    </Text>
                  </TouchableOpacity>
                  <View>
                    <Text
                      style={{
                        color: colors.primary,
                        fontWeight: "bold",
                        fontSize: 24,
                      }}
                    >
                      Tags
                    </Text>
                  </View>
                  <TouchableOpacity
                    onPress={() => {
                      setTaskTagModalVis(false);
                      console.log("Added Tags");
                    }}
                  >
                    <Text
                      style={{
                        color: colors.primary,
                        fontWeight: "bold",
                        fontSize: 16,
                        width: 50,
                        textAlign: "right",
                      }}
                    >
                      Save
                    </Text>
                  </TouchableOpacity>
                </View>

                <ScrollView style={{ padding: 15, paddingBottom: 12 }}>
                  <View
                    style={{
                      display: "flex",
                      flexDirection: "row",
                      justifyContent: "space-between",
                      borderBottomWidth: 2,
                      borderColor: colors.secondaryDarker,
                      paddingBottom: 6,
                    }}
                  >
                    <Input
                      placeholder="Create new tag"
                      autoCorrect={false}
                      style={{ fontSize: 16 }}
                      value={newTag}
                      onChangeText={(text) => setNewTag(text)}
                      autoFocus={true}
                      style={{ width: "90%" }}
                    />
                    <TouchableOpacity
                      style={{ padding: 4, width: "10%", alignItems: "center" }}
                      onPress={addNewTag}
                    >
                      <Icon name="arrow-up" color={colors.primary} size={18} />
                    </TouchableOpacity>
                  </View>

                  <View
                    style={{
                      display: "flex",
                      marginTop: 4,
                      borderBottomWidth: 2,
                      borderColor: colors.secondaryDarker,
                      paddingBottom: 10,
                    }}
                  >
                    <Text
                      style={{
                        fontSize: 18,
                        color: colors.dark,
                      }}
                    >
                      Classes
                    </Text>
                    <View
                      style={{
                        display: "flex",
                        flexDirection: "row",
                        justifyContent: "flex-start",
                        flexWrap: "wrap",
                        marginTop: 4,
                      }}
                    >
                      {Object.keys(contextClasses).map((key) => (
                        <TouchableOpacity
                          style={{
                            backgroundColor: colors.secondary,
                            padding: 6,
                            borderRadius: 8,
                            marginLeft: key == 0 ? 0 : 8,
                          }}
                          onPress={() => {
                            addNewTag(
                              "classTags",
                              contextClasses[key]["className"],
                              contextClasses[key]["id"]
                            );
                          }}
                        >
                          <Text style={{ fontSize: 16, letterSpacing: 1 }}>
                            {contextClasses[key]["className"]}
                          </Text>
                        </TouchableOpacity>
                      ))}
                    </View>
                  </View>

                  <View
                    style={{
                      display: "flex",
                      marginTop: 4,
                    }}
                  >
                    <Text
                      style={{
                        fontSize: 18,
                        color: colors.dark,
                      }}
                    >
                      Terms
                    </Text>
                    <View
                      style={{
                        display: "flex",
                        flexDirection: "row",
                        justifyContent: "flex-start",
                        flexWrap: "wrap",
                        marginTop: 4,
                      }}
                    >
                      {/* Dupe */}
                      <TouchableOpacity
                        style={{
                          backgroundColor: colors.secondary,
                          padding: 6,
                          borderRadius: 8,
                        }}
                      >
                        <Text style={{ fontSize: 16, letterSpacing: 1 }}>
                          Temp
                        </Text>
                      </TouchableOpacity>
                    </View>
                  </View>
                </ScrollView>
                <View
                  style={{
                    backgroundColor: colors.secondary,
                    borderTopWidth: 2,
                    borderColor: colors.secondaryDarker,
                    paddingHorizontal: 15,
                    paddingVertical: 8,
                    borderBottomRightRadius: 15,
                    borderBottomLeftRadius: 15,
                    display: "flex",
                    flexDirection: "column",
                  }}
                >
                  <Text
                    style={{
                      fontSize: 16,
                      fontWeight: "500",
                      color: colors.dark,
                    }}
                  >
                    Selected Tags
                  </Text>
                  <View
                    style={{
                      display: "flex",
                      flexDirection: "row",
                      justifyContent: "flex-start",
                      flexWrap: "wrap",
                      marginTop: 6,
                    }}
                  >
                    {Object.keys(taskTags).map((key, index) =>
                      Object.keys(taskTags[key]).map((task) => (
                        <View
                          style={{
                            backgroundColor: colors.primary,
                            padding: 6,
                            paddingRight: 10,
                            borderRadius: 8,
                            display: "flex",
                            flexDirection: "row",
                            alignItems: "center",
                            marginRight: index == 0 ? 8 : 0,
                            marginBottom: 6,
                          }}
                        >
                          <Text
                            style={{
                              fontSize: 16,
                              color: colors.light,
                              fontWeight: "bold",
                              marginRight: 10,
                            }}
                          >
                            {task}
                          </Text>
                          <TouchableOpacity
                            onPress={() => {
                              let tempTaskTags = { ...taskTags };
                              delete tempTaskTags[key][task];
                              setTaskTags(tempTaskTags);
                              console.log("do something");
                            }}
                          >
                            <Icon name="times" size={16} color={colors.light} />
                          </TouchableOpacity>
                        </View>
                      ))
                    )}
                  </View>
                </View>
              </View>
            )}
          </View>
          <View
            style={{
              backgroundColor: "#fff",
              padding: 15,
            }}
          >
            <View>
              <Input
                placeholder="Task Name"
                value={taskTitle}
                style={{
                  marginBottom: 4,
                  padding: 10,
                  paddingLeft: 2,
                  fontSize: 16,
                }}
                onChangeText={(text) => setTaskTitle(text)}
                placeholderTextColor={colors.secondaryDarker}
                autoFocus={true}
                keyboardType="twitter"
                autoCorrect={false}
              />
            </View>

            <View
              style={{
                display: "flex",
                flexDirection: "row",
                marginTop: 4,
              }}
            >
              <TouchableOpacity
                style={{
                  backgroundColor: colors.secondary,
                  marginRight: 5,
                  paddingHorizontal: 12,
                  paddingVertical: 8,
                  borderRadius: 10,
                  display: "flex",
                  flexDirection: "row",
                  alignItems: "center",
                }}
                onPress={() => {
                  Keyboard.dismiss();
                  setTaskScheduleClicked(true);
                  setTaskModalVis(false);
                }}
              >
                <Icon name="clock" size={20} color={colors.primary} />
                <Text
                  style={{
                    fontSize: 18,
                    marginLeft: 8,
                    color: colors.primary,
                    fontWeight: "bold",
                  }}
                >
                  Today
                </Text>
              </TouchableOpacity>
              <TouchableOpacity
                style={{
                  backgroundColor: colors.secondary,
                  marginLeft: 5,
                  marginRight: 5,
                  paddingHorizontal: 12,
                  paddingVertical: 8,
                  borderRadius: 10,
                }}
                onPress={() => {
                  taskModalFuncView("TASK_PRIORITY");
                }}
              >
                {taskPriority == 0 ? (
                  <Icon name="star" size={20} color={colors.primary} />
                ) : taskPriority == 1 ? (
                  <MaterialCommunityIcons
                    name="star"
                    size={20}
                    color={colors.secondaryDarker}
                  />
                ) : taskPriority == 2 ? (
                  <MaterialCommunityIcons
                    name="star"
                    size={20}
                    color={colors.yellow}
                  />
                ) : taskPriority == 3 ? (
                  <MaterialCommunityIcons
                    name="star"
                    size={20}
                    color={colors.primary}
                  />
                ) : (
                  <MaterialCommunityIcons
                    name="star"
                    size={20}
                    color={colors.red}
                  />
                )}
              </TouchableOpacity>
              <TouchableOpacity
                style={{
                  backgroundColor: colors.secondary,
                  marginLeft: 5,
                  marginRight: 5,
                  paddingHorizontal: 12,
                  paddingVertical: 8,
                  borderRadius: 10,
                }}
                onPress={() => {
                  taskModalFuncView("TASK_DESC");
                }}
              >
                <Icon name="comment-alt" size={20} color={colors.primary} />
              </TouchableOpacity>
              <TouchableOpacity
                style={{
                  backgroundColor: colors.secondary,
                  marginLeft: 5,
                  paddingLeft: 11,
                  paddingRight: 11,
                  paddingTop: 7,
                  paddingBottom: 7,
                  borderRadius: 10,
                }}
                onPress={() => {
                  taskModalFuncView("TASK_TAG");
                }}
              >
                <MaterialCommunityIcons
                  name="tag-outline"
                  size={24}
                  color={colors.primary}
                />
              </TouchableOpacity>
            </View>
            <View
              style={{
                display: "flex",
                flexDirection: "row",
                justifyContent: "space-between",
                marginTop: 16,
              }}
            >
              <Button
                icon="window-close"
                mode="contained"
                onPress={() => {
                  Keyboard.dismiss();
                  resetTaskModal();
                }}
              >
                <Text>Discard</Text>
              </Button>
              <Button
                icon="plus-circle"
                mode="contained"
                onPress={() => {
                  addNewTask();
                }}
              >
                <Text>Create Task</Text>
              </Button>
            </View>
          </View>
        </View>
      </Modal>

      <Modal
        isVisible={taskScheduleVis}
        avoidKeyboard={true}
        hasBackdrop={true}
        backdropColor="black"
        onSwipeComplete={() => resetTaskSchedule()}
        onModalHide={() => {
          setTaskModalVis(true);
        }}
        style={{
          margin: 0,
        }}
      >
        <View
          style={{
            flex: 1,
            justifyContent: "flex-end",
          }}
        >
          <View
            style={{
              display: "flex",
              justifyContent: "space-between",
              flexDirection: "row",
              alignItems: "baseline",
              backgroundColor: colors.secondary,
              padding: 16,
              paddingBottom: 12,
              paddingTop: 18,
              borderTopRightRadius: 20,
              borderTopLeftRadius: 20,
            }}
          >
            <TouchableOpacity
              onPress={() => {
                resetTaskSchedule();
              }}
            >
              <Text
                style={{
                  color: colors.primary,
                  fontSize: 16,
                  fontWeight: "bold",
                  width: 60,
                }}
              >
                Cancel
              </Text>
            </TouchableOpacity>
            <View
              style={{
                borderTopWidth: 5,
                borderColor: colors.secondaryAccent,
                borderRadius: 3,
              }}
            >
              <Text
                style={{
                  color: colors.primary,
                  fontWeight: "600",
                  fontSize: 20,
                  paddingTop: 16,
                }}
              >
                Schedule
              </Text>
            </View>
            <TouchableOpacity
              onPress={() => {
                addNewSchedule();
              }}
            >
              <Text
                style={{
                  color: colors.primary,
                  fontSize: 16,
                  fontWeight: "bold",
                  width: 60,
                  textAlign: "right",
                }}
              >
                Save
              </Text>
            </TouchableOpacity>
          </View>

          <View
            style={{
              paddingHorizontal: 12,
              paddingBottom: 25,
              backgroundColor: "#fff",
            }}
          >
            <Calendar
              theme={{
                todayTextColor: colors.primary,
                arrowColor: colors.primary,
                monthTextColor: colors.primary,
                indicatorColor: colors.primary,
                textDayFontWeight: "300",
                textMonthFontWeight: "bold",
                textDayHeaderFontWeight: "bold",
                selectedDayBackgroundColor: colors.primary,
              }}
              onDayPress={(day) => {
                selectDate(day);
              }}
              markedDates={markedDates}
            />
            {Object.keys(markedDates).length > 0 ? (
              <View
                style={{
                  display: "flex",
                  flexDirection: "row",
                  justifyContent: "space-between",
                }}
              >
                <View
                  style={{
                    backgroundColor: colors.light,
                    borderRadius: 15,
                    padding: 10,
                    width: "49%",
                  }}
                >
                  <View
                    style={{
                      borderBottomWidth: 1,
                      borderColor: colors.dark,
                      paddingBottom: 4,
                    }}
                  >
                    <Text
                      style={{
                        fontWeight: "bold",
                        fontSize: 16,
                        marginLeft: 1,
                        width: 100,
                      }}
                    >
                      Dates
                    </Text>
                  </View>
                  <ScrollView
                    style={{
                      height: 80,
                      marginTop: 4,
                    }}
                  >
                    {Object.keys(markedDates).map((key) => (
                      <View
                        style={{
                          display: "flex",
                          marginBottom: 4,
                        }}
                      >
                        <View
                          style={{
                            display: "flex",
                            flexDirection: "row",
                            justifyContent: "space-between",
                            alignContent: "center",
                          }}
                        >
                          <Text
                            style={{
                              fontSize: 18,
                              padding: 5,
                              paddingLeft: 0,
                            }}
                          >
                            {key}
                          </Text>
                        </View>
                      </View>
                    ))}
                  </ScrollView>
                </View>
                <View
                  style={{
                    backgroundColor: colors.light,
                    borderRadius: 15,
                    padding: 10,
                    width: "49%",
                  }}
                >
                  <View
                    style={{
                      borderBottomWidth: 1,
                      borderColor: colors.dark,
                      paddingBottom: 4,
                    }}
                  >
                    <Text
                      style={{
                        fontWeight: "bold",
                        fontSize: 16,
                        marginLeft: 1,
                        width: 100,
                      }}
                    >
                      Time
                    </Text>
                  </View>
                  <View
                    style={{
                      display: "flex",
                      marginTop: "15%",
                      alignItems: "center",
                    }}
                  >
                    <DateTimePicker
                      display="default"
                      mode={"time"}
                      is24Hour={false}
                      minuteInterval={5}
                      value={taskTime}
                      onChange={setScheduleTime}
                      style={{ width: 90 }}
                    />
                  </View>
                </View>
              </View>
            ) : (
              <View
                style={{
                  display: "flex",
                  flexDirection: "row",
                  justifyContent: "center",
                  backgroundColor: colors.secondary,
                  paddingVertical: 10,
                  paddingHorizontal: 20,
                  borderRadius: 15,
                }}
              >
                <Text style={{ fontSize: 16, color: colors.dark }}>
                  Selected dates will appear here.
                </Text>
              </View>
            )}
          </View>
        </View>
      </Modal>
    </>
  );
}