import { useEffect, useState } from "react";

import Card from "@/components/Card/Card";
import CardColumn from "@/components/CardColumn/CardColumn";
import CardHeader from "@/components/CardHeader/CardHeader";
import Flatastic from "@/components/Flatastic/Flatastic";
import HomeAssistant from "@/components/HomeAssistant/HomeAssistant";
import Timetable from "@/components/Timetable/Timetable";
import Datetime from "@/components/Datetime/Datetime";
import Terminal from "@/components/Terminal/Terminal";
import Footer from "@/components/Footer/Footer";

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

export default function Dashboard() {
    const schemes = [style.day, style.evening, style.night];
    const [schemeIndex, setSchemeIndex] = useState(0);
    const scheme = schemes[schemeIndex];

    // change background color based on time of day
    const time = useEffect(() => {
        const timer = setInterval(
            () => {
                let d = new Date();
                let hour = d.getHours();
                if (hour >= 7 && hour < 16) {
                    setSchemeIndex(0);
                } else if (hour >= 16 && hour < 23) {
                    setSchemeIndex(1);
                } else {
                    setSchemeIndex(2);
                }
            },
            20 * 60 * 1000,
        );
        return () => {
            clearInterval(timer);
        };
    }, []);

    return (
        <div className={`${style.dashboard} ${scheme}`}>
            <div className={style.cardWrapper}>
                <Card>
                    <CardHeader icon="🚊" content="Timetable" />
                    <Timetable />
                </Card>

                <div className={style.small}>
                    <Card>
                        <CardHeader icon="🕐" content="Clock" />
                        <Datetime />
                    </Card>
                </div>

                <Card>
                    <CardHeader icon="🔔" content="Terminal" active={true} />
                    <Terminal />
                </Card>

                <Card>
                    <CardHeader icon="🧹" content="Flatastic" />
                    <Flatastic />
                </Card>
            </div>

            <div className={style.footer}>
                <Footer />
            </div>
        </div>
    );
}