import { useEffect } from "react";
import { useFlatasticStore } from "@/store/flatastic";

import type { FlatasticChore } from "@/types/flatasticChore";

const idToNameMap: Record<number, string> = {
    1836104: "Gruber",
    1836101: "Darius",
    1593610: "Arif",
    1860060: "Rishab",
};

export default function Flatastic() {
    const fetchChores = useFlatasticStore((state) => state.fetch);
    const chores = useFlatasticStore((state) => state.chores);

    useEffect(() => {
        fetchChores();
        const interval = setInterval(() => {
            fetchChores();
        }, 60000);
        return () => clearInterval(interval);
    }, [fetchChores]);

    return (
        <div>
            <h1>Flatastic Chores</h1>
            <ul>
                {chores.map((chore: FlatasticChore) => (
                    <li key={chore.id} style={{ textAlign: "left" }}>
                        {idToNameMap[chore.currentUser]}: {chore.title} -
                        Points: {chore.points}
                    </li>
                ))}
            </ul>
        </div>
    );
}