import { useEffect, useState } from "react";
import { useHomeAssistantStore } from "@/store/homeAssistant";
import pasta from "./pasta.ts";
import style from "./style.module.css";

export default function Terminal() {
    const [index, setIndex] = useState(0);

    // random shitpost every minute
    useEffect(() => {
        const timer = setInterval(() => {
            setIndex(Math.floor(Math.random() * pasta.length));
        }, 60 * 1000);
        return () => {
            clearInterval(timer);
        };
    }, []);

    const text = pasta[index];

    const fetchHomeAssistantData = useHomeAssistantStore(
        (state) => state.fetch,
    );
    const tentTemperature = useHomeAssistantStore(
        (state) => state.tentTemperature,
    );
    const tentHumidity = useHomeAssistantStore((state) => state.tentHumidity);

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

    return (
        <div className={style.container}>
            <div className={style.input}>
                <span className={style.prompt}>[sus@home ~/hallway]{"$"}</span>{" "}
                tentfetch
            </div>
            <div className={style.fetch}>
                <span>
                    <pre>
                        {"      -///:.      "}
                        <span className={style.username}>tent</span>@
                        <span className={style.hostname}>home</span>
                    </pre>
                </span>
                <span>
                    <pre>
                        {"     "}smhhhhmh\`{"   "}os{"        "}Arch Linux
                    </pre>
                </span>
                <span>
                    <pre>
                        {"    "}:N{"      "}Ns{"    "}temp{"      "}
                        <span className={style.temp}>{tentTemperature}°C</span>
                    </pre>
                </span>
                <span>
                    <pre>
                        {"    "}hNNmmmmNNN{"    "}humidity{"  "}
                        <span className={style.humidity}>{tentHumidity}%</span>
                    </pre>
                </span>
                <span>
                    <pre>
                        {"    "}NNssussNNN{"    "}plants{"    "}
                        <span className={style.plants}>3</span>
                    </pre>
                </span>
                <span>
                    <pre>
                        {"  "}sNn:{"    "}sNNo
                    </pre>
                </span>
            </div>
            <div className={style.input}>
                <span className={style.prompt}>[sus@home ~/hallway]{"$"}</span>{" "}
                cat msg.txt
            </div>
            <div className={style.msg}>{text}</div>
            <div className={style.input}>
                <span className={style.prompt}>[sus@home ~/hallway]{"$"}</span>
                {" █"}
            </div>
        </div>
    );
}