import React, { useEffect, useState, useContext } from "react";
import { StyleSheet, Text, SafeAreaView, View } from "react-native";
import { createBottomTabNavigator } from "@react-navigation/bottom-tabs";
import AsyncStorage from "@react-native-async-storage/async-storage";
import { Card, useTheme } from "react-native-paper";

const globalStyles = require("../../constants/globalstyles");
const Tab = createBottomTabNavigator();

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

function Home({ navigation: { navigate } }) {
  const { contextTasks } = useContext(TaskContext);
  const { colors } = useTheme();

  const [date, getDate] = useState(new Date());
  var timeOptions = {
    hour: "numeric",
    minute: "numeric",
  };

  const getClassInfo = async () => {
    try {
      const existingClasses = await AsyncStorage.getItem("classes");
      let classes = JSON.parse(existingClasses);
      console.log(classes, "[ASNYCSTORAGE CLASSES]");
      //   AsyncStorage.removeItem("classes");
    } catch (e) {
      console.log(e);
    }
    console.log("Removed this function");
  };

  const toggleWelcome = async () => {
    try {
      await AsyncStorage.setItem("welcomeViewed", JSON.stringify(false));
    } catch (e) {
      alert(e);
    }
  };

  useEffect(() => {
    Object.keys(contextTasks).forEach((key) => {
      let soonestDate;
      Object.keys(contextTasks[key]["taskSchedule"]).forEach((dateKey) => {
        if (dateKey == 0) {
          soonestDate = new Date(
            contextTasks[key]["taskSchedule"][dateKey]["date"]
          );
          console.log(contextTasks[key]["taskSchedule"], "DATE KEYER");
        } else if (
          new Date(contextTasks[key]["taskSchedule"][dateKey]["date"]) <
          soonestDate
        ) {
          dateCheck = new Date(
            contextTasks[key]["taskSchedule"][dateKey]["date"]
          );
        }
      });
    });
  }, [contextTasks]);
  return (
    <>
      <SafeAreaView style={globalStyles.background}>
        <View style={globalStyles.container}>
          <View>
            <Card.Title
              title="Welcome back!"
              subtitle="You have nothing coming up."
              style={{ backgroundColor: "#fff", marginBottom: 12 }}
            />
          </View>

          <View
            style={{ backgroundColor: "#fff", padding: 16, paddingBottom: 14 }}
          >
            <Text
              style={{
                marginBottom: 6,
                marginLeft: 1,
                fontSize: 20,
                color: colors.primary,
                fontWeight: "600",
              }}
            >
              Upcoming Tasks
            </Text>
            {contextTasks.length == 0 ? (
              <Text
                style={{ fontSize: 12, letterSpacing: 0.4, fontWeight: "300" }}
              >
                No tasks to display!
              </Text>
            ) : (
              Object.keys(contextTasks).map((key) => (
                <View
                  style={{
                    backgroundColor: colors.light,
                    padding: 8,
                    marginBottom: 12,
                  }}
                  key={contextTasks[key]["id"]}
                >
                  <View
                    style={{
                      display: "flex",
                      marginBottom: 5,
                    }}
                  >
                    <Text
                      style={{
                        color: colors.dark,
                        fontSize: 16,
                        fontWeight: "500",
                        marginBottom: 1,
                      }}
                    >
                      {contextTasks[key]["taskName"]}
                    </Text>
                    {contextTasks[key]["taskSchedule"][0]["date"] && (
                      <View style={{ display: "flex", flexDirection: "row" }}>
                        <Text style={{ fontWeight: "500" }}>Due </Text>
                        <Text>
                          {new Date(
                            contextTasks[key]["taskSchedule"][0]["date"]
                          ).toLocaleDateString("en-US", { timeZone: "UTC" })}
                          <>
                            <Text> @ </Text>
                            <Text>
                              {new Date(
                                contextTasks[key]["taskSchedule"][0]["time"]
                              ).toLocaleTimeString([], {
                                hour: "2-digit",
                                minute: "2-digit",
                              })}
                            </Text>
                          </>
                        </Text>
                      </View>
                    )}
                  </View>

                  <View style={{ display: "flex", flexDirection: "row" }}>
                    {Object.keys(contextTasks[key]["taskTags"]).map((tagType) =>
                      Object.keys(contextTasks[key]["taskTags"][tagType]).map(
                        (tag) => (
                          <View
                            style={{
                              backgroundColor: colors.primary,
                              borderRadius: 8,
                              marginRight: 5,
                            }}
                          >
                            <Text
                              style={{
                                padding: 6,
                                paddingHorizontal: 8,
                                color: colors.light,
                                fontSize: 12,
                              }}
                            >
                              {tag}
                            </Text>
                          </View>
                        )
                      )
                    )}
                  </View>
                </View>
              ))
            )}
          </View>
        </View>
      </SafeAreaView>
    </>
  );
}

export default Home;

const styles = StyleSheet.create({
  updatesPanel: {
    backgroundColor: "#fff",
    paddingTop: 12,
    paddingBottom: 12,
    paddingRight: 10,
    paddingLeft: 10,
    justifyContent: "center",
    alignItems: "center",
    marginBottom: 12,
  },
  favoritesPanel: {
    backgroundColor: "#fff",
    paddingTop: 12,
    paddingBottom: 12,
    paddingRight: 15,
    paddingLeft: 12,
    justifyContent: "space-between",

    flexDirection: "row",
    marginBottom: 12,
  },
});