import { Pressable, StyleSheet, Text, View } from 'react-native';
import React, { useEffect, useState } from 'react';
import moment from 'moment';
import {Calendar} from "react-native-calendars";
import axios from "axios"
import { Feather } from '@expo/vector-icons';
import { Buffer } from 'buffer';
import AsyncStorage from "@react-native-async-storage/async-storage";


const getToken = async () => {
  try {
    let token = await AsyncStorage.getItem('authToken'); // get the authToken stored in AsyncStorage from login.js
    let decodeToken = JSON.parse(Buffer.from(token.split('.')[1], 'base64').toString());
    let userId = decodeToken.userId;
    return userId;
  } catch (e) {
    // error reading value
    console.log(e);
  }
};

const index = () => {
  const today = moment().format("YYYY-MM-DD");
  const [selectedDate, setSelectedDate] = useState(today);
  const [todos, setTodos] = useState([]);

  const fetchCompletedTodos = () => {
    try {
      getToken().then( async (resp) => {
        let userId = resp;

        const res = await axios.get(`http://localhost:3030/users/${userId}/todos/completed/${selectedDate}`);
        const completedTodos = res.data.completedTodos || [];

        setTodos(completedTodos);
      });

    } catch (error) {
      console.log("Error", error)
      }
  }
  useEffect(() => {
    fetchCompletedTodos();

  }, [selectedDate]);
  //Daypress
  const handleDayPress = (day) => {
    setSelectedDate(day.dateString)
  }


  return (
    <View style={{flex:1, backgroundColor: "white"}}>
      <Calendar  onDayPress={handleDayPress} 
        theme = {{calendarBackground: "white", todayTextColor: 'red', arrowColor: "black",}}
        markedDates={{[selectedDate]: {selected: true, selectedColor: "red"}}}
      />
      {todos?.length > 0 && (
        <View style={{marginTop: 20, marginHorizontal: 10}}>
          <View style={{flexDirection:"row", alignItems: "center", gap: 10}}>
            <Text style={{marginBottom: 20, fontSize: 16}}>You completed <Text style={{fontWeight: 600, color: "#61677A"}}>{todos.length}</Text> tasks</Text>
          </View>
          {todos.map((item, index) => (
            <Pressable key={index} style={{backgroundColor: "#EEEEEE", marginBottom: 10, padding: 5, borderRadius: 5}}>
              <View style={{flexDirection:"row", alignItems: "center", gap: 10}}>
                <Feather name="check-circle" size={15} color="#1A5319" />
                <Text style={{flex: 1, textDecorationLine: "line-through", color: "#1A5319"}}>{item.title}</Text>
              </View>
            </Pressable>
          ))}
        </View>
      )}
    </View>
  )
}

export default index

const styles = StyleSheet.create({})