import { djbase, djclass, bind, prototype, AbstractConstructor } from "../declare";

import { DjxWidgetBase } from "../tsx/DjxWidgetBase";
import { createElement } from "../tsx";

interface MyWidgetAttrs {
    title: string;

    counter: number;
}

interface MyWidgetEvents {
    "count-inc": Event;

    "count-dec": Event;
}


@djclass
export class MyWidget extends djbase(DjxWidgetBase as AbstractConstructor<DjxWidgetBase<MyWidgetAttrs, MyWidgetEvents>>) {

    @bind({node: "titleNode", type:"innerHTML"})
    title = "";

    @prototype()
    counter = 0;

    render() {
        return <div>
            <h1 data-dojo-attach-point="titleNode"></h1>
            <span onclick={() => this._onIncClick()}>[+]</span>
            <span onclick={() => this._onDecClick()}>[-]</span>
        </div>;
    }

    _onIncClick() {
        this.emit("count-inc", { bubbles: false } );
    }

    _onDecClick() {
        this.emit("count-dec", { bubbles: false } );
    }
}