import {AppStore, getAppState} from "../StateStore";
import GridWidget, {GridProps} from "./GridWidget";
import UIComponent from "./UIComponent";
import * as JSX from "../JSXFactory";

class TimerWidget extends UIComponent {
    private readonly display: HTMLElement;
    private skeleton: GridWidget;
    private nextUpdateTime: number;
    private timerRef: HTMLElement;
    private lastUpdateRef: HTMLElement;

    constructor(gridProps: GridProps) {
        super();
        this.display = <this.MainDisplay />;
        this.skeleton = new GridWidget({
            ...gridProps,
            className: "timer-widget",
            title: "Next update in:",
            body: this.display,
        });
        AppStore().subscribeStoreVal("lastUpdateTime", () => this.resetTimer());
        AppStore().subscribeStoreVal("utcOffset", () => this.resetTimer());
        setInterval(() => this.refreshTimer(), 10);
        this.resetTimer();
    }

    private resetTimer() {
        this.nextUpdateTime = getAppState().lastUpdateTime + getAppState().updateIntervalSeconds;
        this.updateUpdateText();
        this.refreshTimer();
    }

    private updateUpdateText() {
        this.lastUpdateRef.innerText = new Date(getAppState().lastUpdateTime * 1000 + getAppState().utcOffset * 60 * 60 * 1000).toLocaleString();
    }

    private MainDisplay = () => {
        this.timerRef = <div className={"countdown"}/>;
        this.lastUpdateRef = 
            <span className={"last-update"}>
                {new Date(getAppState().lastUpdateTime).toLocaleString()}
            </span>;
        return (<div>
            {this.timerRef}
            <div>
                <div className={"last-update"}>Last update was at:</div>
                <div>{this.lastUpdateRef}</div>
            </div>
        </div>);
    }

    private refreshTimer() {
        const now = new Date().getTime() / 1000;
        if (now <= this.nextUpdateTime) {
            this.timerRef.innerText = `${(this.nextUpdateTime - now).toFixed(2)}s`;
        } else {
            this.timerRef.innerText = "0.00s";
        }
    }

    current() {
        return this.skeleton.current();
    }
}

export default TimerWidget;