import { View, Text } from "react-native-ui-lib";
import React from "react";
import { IToDo, useToDosContext } from "@/contexts/ToDosContext";
import ToDoItem from "./ToDoItem";
import { format, isToday, isTomorrow } from "date-fns";
import { ScrollView } from "react-native-gesture-handler";

const groupToDosByDate = (toDos: IToDo[]) => {
    return toDos.reduce((groups, toDo) => {
      const dateKey = isToday(toDo.date)
        ? "Today • " + format(toDo.date, "EEE MMM dd")
        : isTomorrow(toDo.date)
        ? "Tomorrow • " + format(toDo.date, "EEE MMM dd")
        : format(toDo.date, "EEE MMM dd");
  
      if (!groups[dateKey]) {
        groups[dateKey] = [];
      }
  
      groups[dateKey].push(toDo);
      return groups;
    }, {} as { [key: string]: IToDo[] });
  };

const ToDosList = () => {
  const { toDos } = useToDosContext();
  const groupedToDos = groupToDosByDate(toDos);

  return (
    <View>
      {Object.keys(groupedToDos).map((dateKey) => (
        <View key={dateKey}>
          <Text text70 style={{ fontWeight: "bold", marginVertical: 8, paddingHorizontal: 20}}>
            {dateKey}
          </Text>
          {groupedToDos[dateKey].map((item) => (
            <ToDoItem key={item.id} item={item} />
          ))}
        </View>
      ))}
    </View>
  );
};

export default ToDosList;

/*const groupToDosByDate = (toDos: IToDo[]) => {
    return toDos.reduce((groups, toDo) => {
        const dateKey 
    })
}*/