import { djbase, djclass } from "@implab/djx/declare";
import { DjxWidgetBase } from "@implab/djx/tsx/DjxWidgetBase";
import { createElement, watch, prop, attach, all, bind, toggleClass } from "@implab/djx/tsx";
import ProgressBar from "./ProgressBar";
import Button = require("dijit/form/Button");
import { interval } from "rxjs";

@djclass
export default class MainWidget extends djbase(DjxWidgetBase) {

    titleNode?: HTMLHeadingElement;

    progressBar?: ProgressBar;

    count = 0;

    showCounter = false;

    counterNode?: HTMLInputElement;

    paused = false;

    render() {
        const Counter = ({ children }: { children: unknown[] }) => <span>Counter: {children}</span>;

        return <div className="tundra">
            <h2 ref={attach(this, "titleNode")}>Hi!</h2>
            <ProgressBar ref={attach(this, "progressBar")} />
            <section style={{ padding: "10px" }}>
                {watch(prop(this, "showCounter"), flag => flag &&
                    [
                        <Counter><input ref={all(
                            bind("value", prop(this, "count")
                                .map(x => x*10)
                                .map(String)
                            ),
                            attach(this, "counterNode")
                        )} /> <span>ms</span></Counter>,
                        " | ",
                        <span ref={bind("innerHTML", interval(1000))}></span>,
                        " | ",
                        <Button
                            ref={all(
                                bind("label", prop(this, "paused")
                                    .map(x => x ? "Unpause" : "Pause")
                                ),
                                toggleClass("paused", prop(this,"paused"))
                            )}
                            onClick={this._onPauseClick}
                        />
                    ]

                )}
            </section>
            <Button onClick={this._onToggleCounterClick}>Toggle counter</Button>
        </div>;
    }

    postCreate(): void {
        super.postCreate();

        const h = setInterval(
            () => {
                this.set("count", this.count + 1);
            },
            10
        );
        this.own({
            destroy: () => {
                clearInterval(h);
            }
        });
    }

    private _onPauseClick = () => {
        this.set("paused", !this.paused);
    }

    private _onToggleCounterClick = () => {
        this.set("showCounter", !this.showCounter);
    }
}