import React, { useState, useContext, useEffect } from "react";
import {
  StyleSheet,
  Text,
  View,
  TouchableOpacity,
  TextInput,
  KeyboardAvoidingView,
} from "react-native";
import { Agenda } from "react-native-calendars";
import { useTheme, Card } from "react-native-paper";

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

export default function CalendarPage() {
  const { colors } = useTheme();
  const { contextTasks } = useContext(TaskContext);
  const { contextClasses } = useContext(ClassContext);

  const [items, setItems] = useState({});

  useEffect(() => {
    let accumulate = contextTasks.reduce((acc, val) => {
      val["taskSchedule"].forEach((schedObj) => {
        if (acc[schedObj.date]) {
          acc[schedObj.date] = [
            ...acc[schedObj.date],
            {
              name: val["taskName"],
              time: new Date(schedObj.time).toLocaleTimeString([], {
                hour: "2-digit",
                minute: "2-digit",
              }),
              type: "Task",
            },
          ];
        } else {
          acc[schedObj.date] = [
            {
              name: val["taskName"],
              time: new Date(schedObj.time).toLocaleTimeString([], {
                hour: "2-digit",
                minute: "2-digit",
              }),
              type: "Task",
            },
          ];
        }
      });
      return acc;
    }, {});
    accumulate = contextClasses.reduce((acc, val) => {
      val["classTimes"].forEach((schedObj) => {
        let date = new Date(schedObj.date)
          .toISOString()
          .replace(/T.*/, "")
          .split("-")
          .join("-");
        let time =
          new Date(schedObj["timeStart"]).toLocaleTimeString([], {
            hour: "2-digit",
            minute: "2-digit",
          }) +
          "-" +
          new Date(schedObj["timeEnd"]).toLocaleTimeString([], {
            hour: "2-digit",
            minute: "2-digit",
          });
        console.log(val["className"], schedObj.date, time);
        if (acc[date]) {
          acc[date] = [
            ...acc[date],
            {
              name: val["className"],
              time: time,
              type: "Class",
            },
          ];
        } else {
          acc[date] = [
            {
              name: val["className"],
              time: time,
              type: "Class",
            },
          ];
        }
      });
      return acc;
    }, accumulate);

    setItems(accumulate);
  }, [contextTasks, contextClasses]);

  return (
    <View style={{ flex: 1, backgroundColor: colors.background }}>
      <Agenda
        items={items}
        renderItem={(item, firstItemInDay) => {
          return (
            <View
              style={{ marginTop: firstItemInDay ? 17 : 5, marginRight: 10 }}
            >
              <Card>
                <Card.Content>
                  <View
                    style={{
                      flexDirection: "column",
                    }}
                  >
                    <Text>{item["time"]}</Text>
                    <Text style={{ marginTop: 10, fontSize: 16 }}>
                      {item["name"]}
                    </Text>
                    <Text style={{ fontWeight: "200" }}>{item["type"]}</Text>
                  </View>
                </Card.Content>
              </Card>
            </View>
          );
        }}
        theme={{
          agendaDayTextColor: colors.dark,
          agendaDayNumColor: colors.primary,

          agendaKnobColor: colors.secondary,

          todayTextColor: colors.primary,
          arrowColor: colors.primary,
          monthTextColor: colors.primary,
          indicatorColor: colors.primary,
          textDayFontWeight: "300",
          textMonthFontWeight: "bold",
          textDayHeaderFontWeight: "bold",
          selectedDayBackgroundColor: colors.primary,
          dotColor: colors.primary,
          backgroundColor: colors.background,
        }}
      />
    </View>
  );
}