text: import { StatusBar } from "expo-status-bar";
  import React, { useState, useEffect } from "react";
  import { StyleSheet, Text, View, Button, Pressable } from "react-native";
  import GestureRecognizer from "react-native-swipe-gestures";
  import AsyncStorage from "@react-native-async-storage/async-storage";
  const styles = StyleSheet.create({
      container: {
          display: "flex",
          flex: 1,
          backgroundColor: "#fff",
          alignItems: "center",
          justifyContent: "center",
          backgroundColor: "#000",
          color: "#C7C7C7",
      },
      text: {
          color: "#C7C7C7",
      },
      buttonContainer: {
          display: "flex",
          flexDirection: "row",
          flexWrap: "wrap",
          width: "76%",
          maxWidth: 299,
          height: 388,
          alignContent: "space-around",
          justifyContent: "space-around",
      },
      button: {
          backgroundColor: "#121212",
          width: 50,
          height: 50,
          borderRadius: 25,
      },
  });
  const levelColors = ["#121212", "#414141", "#BBBBBB", "#B2DFBC", "#4BAF61"];
  const daysInMonth = [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31];
  const OverviewScreen = ({ navigation }) => {
      const [data, setData] = useState([]);
      const isLeapYear = (year) => {
          if (year % 400 == 0) return true;
          if (year % 100 == 0) return false;
          if (year % 4 == 0) return true;
          return false;
      };
      const loadData = async () => {
          try {
              let temp = []; //temp array holds how many sessions we did for each day in the past 30 days
              let today = new Date(Date.now());
              if (isLeapYear(today.getFullYear())) daysInMonth[2]++;
              let n = 30;
              let month = today.getMonth() + 1;
              let date = today.getDate();
              while (n--) {
                  let sessions = JSON.parse((await AsyncStorage.getItem(`${month}/${date}`))) ?? [];
                  temp.unshift(sessions.length);
                  //subtract 1 from date
                  date--;
                  if (date == 0) {
                      month--;
                      if (month == 0) {
                          month = 12;
                      }
                      date = daysInMonth[month-1];
                  }
              }
              setData(temp);
          } catch (e) {}
      };
      useEffect(() => {
          loadData();
      }, []);
  
      return (
          <GestureRecognizer
              style={styles.container}
              onSwipeRight={() => {
                  navigation.navigate("Timer");
              }}
              onSwipeLeft={() => {
                  navigation.navigate("Details");
              }}
          >
              <View style={styles.buttonContainer}>
                  {data.map((numSessions, index) => {
                      return <View style={[styles.button, { backgroundColor: levelColors[numSessions > 4? 4 : numSessions] }]} key={index}></View>;
                  })}
              </View>
          </GestureRecognizer>
      );
  };
  
  export default OverviewScreen;
  