import classNames from "classnames";
import { useEffect } from "react";
import { useFlatasticStore } from "@/store/flatastic";
import type {
    FlatasticChore,
    FlatasticShoppingItem,
    FlatasticUser,
} from "@/types/flatasticChore";
import style from "./style.module.css";

function choreItem(chore: FlatasticChore, idToNameMap: Record<number, string>) {
    let className = "";
    let timeLeftInDays = null;

    if (chore.rotationTime === -1) {
        className = "irregular";
    } else {
        const negativeTimeFix = chore.timeLeftNext < 0 ? 1 : 0; // Floats are rounded down, so we need to add 1 to the days if the time is negative
        const timeInDays =
            Math.abs(chore.timeLeftNext) / (60 * 60 * 24) + negativeTimeFix;

        const bigG = Math.trunc(timeInDays / 100);
        const days = Math.trunc(timeInDays % 100);

        timeLeftInDays = (
            <span className={style.timeLeft}>
                {bigG > 0 && `${bigG} g${bigG > 1 ? "s" : ""} `}
                {days >= 0 && `${days} d`}
            </span>
        );

        if (days === 0) {
            className = "dueToday";
            timeLeftInDays = <span className={style.timeLeft}>today</span>;
        } else if (chore.timeLeftNext < 0) {
            className = "due";
        } else {
            className = "notDue";
        }
    }

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

export default function Flatastic() {
    const fetchFlatasticData = useFlatasticStore((state) => state.fetch);
    const flatasticData = useFlatasticStore((state) => state.flatasticData);

    console.log("flatasticData", flatasticData);

    const chores = (flatasticData?.chores as FlatasticChore[]) || [];
    const regularChores: FlatasticChore[] = [];
    const irregularChores: FlatasticChore[] = [];

    chores.forEach((chore) => {
        if (chore.rotationTime === -1) {
            irregularChores.push(chore);
        } else {
            regularChores.push(chore);
        }
    });

    regularChores.sort((a, b) => a.lastDoneDate - b.lastDoneDate);

    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 regularChoresRender = regularChores.map((chore) => {
        return choreItem(chore, idToNameMap);
    });

    const irregularChoresRender = irregularChores.map((chore) => {
        return choreItem(chore, idToNameMap);
    });

    const shoppingList = flatasticData?.shoppingList || [];

    const shoppingListRender = shoppingList.map(
        (item: FlatasticShoppingItem) => {
            return shoppingItem(item);
        },
    );
    const shoppingListContainer = shoppingList.length > 0 && (
        <div className={style.shoppingListContainer}>
            <h1>Shopping List</h1>
            <ul className={style.shoppingList}>{shoppingListRender}</ul>
        </div>
    );

    return (
        <div className={style.container}>
            <div className={style.choreContainer}>
                <h1>Chores</h1>
                <ul className={style.choreList}>
                    {[...regularChoresRender, ...irregularChoresRender]}
                </ul>
            </div>

            {shoppingListContainer}
        </div>
    );
}

function shoppingItem(item: FlatasticShoppingItem) {
    return (
        <li key={item.id} className={style.shoppingListItem}>
            {item.itemName}
        </li>
    );
}