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

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

import style from "./style.module.css";

export default function Flatastic() {
    const fetchFlatasticData = useFlatasticStore((state) => state.fetch);
    const flatasticData = useFlatasticStore((state) => state.flatasticData);
    const chores = (flatasticData?.chores as FlatasticChore[]) || [];
    chores.sort(
        (a, b) =>
            a.timeLeftNext - b.timeLeftNext && b.rotationTime - a.rotationTime,
    );
    const users = flatasticData?.users;
    const idToNameMap: Record<number, string> = {};
    users.forEach((user: FlatasticUser) => {
        idToNameMap[user.id] = user.firstName;
    });

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

    const choresRender = chores.map((chore) => {
        let className = "";
        let timeLeftInDays = null;

        if (chore.rotationTime === -1) {
            className = "irregular";
        } else {
            className = chore.timeLeftNext <= 0 ? "due" : "notDue";
            timeLeftInDays = (
                <span className={style.timeLeft}>
                    {Math.abs(Math.floor(chore.timeLeftNext / (60 * 60 * 24)))}d
                </span>
            );
        }

        return (
            <li
                key={chore.id}
                className={[style.chore, style[className]].join(" ")}
            >
                <span className={style.userName}>
                    {`${idToNameMap[chore.currentUser]}`}
                </span>
                : {chore.title} {timeLeftInDays} {"🪙".repeat(chore.points)}
            </li>
        );
    });

    return (
        <div className={style.container}>
            <h1>Chores</h1>
            <ul className={style.choreList}>{choresRender}</ul>
        </div>
    );
}