import { djbase, djclass } from "../declare";
import _WidgetBase = require("dijit/_WidgetBase");
import _AttachMixin = require("dijit/_AttachMixin");
import { Rendition, isNode } from "./traits";
import registry = require("dijit/registry");
import on = require("dojo/on");

// type Handle = dojo.Handle;

export interface EventArgs {
    bubbles?: boolean;

    cancelable?: boolean;

    composed?: boolean;
}

export interface DjxWidgetBase<Attrs = {}, Events extends { [name in keyof Events]: Event } = {}> extends
    _WidgetBase<Events> {

    /** This property is declared only for type inference to work, it is never assigned
     * and should not be used.
     */
    readonly _eventMap: Events & GlobalEventHandlersEventMap;

    /** The list of pairs of event and method names. When the widget is created all methods from
     * this list will be connected to corresponding events.
     *
     * This property is maintained in the prototype
     */
    _eventHandlers: Array<{
        eventName: string,
        handlerMethod: keyof any;
    }>;
}

type _super = {
    startup(): void;
};

@djclass
export abstract class DjxWidgetBase<Attrs = {}, Events = {}> extends djbase<_super, _AttachMixin>(_WidgetBase, _AttachMixin) {

    buildRendering() {
        this.domNode = this.render().getDomNode();
        super.buildRendering();

        // now we should get assigned data-dojo-attach-points
        // place the contents of the original srcNode to the containerNode
        const src = this.srcNodeRef;
        const dest = this.containerNode;

        // the donNode is constructed now we need to connect event handlers
        this._connectEventHandlers();

        if (src && dest) {
            while (src.firstChild)
                dest.appendChild(src.firstChild);
        }
    }

    abstract render(): Rendition<HTMLElement>;

    private _connectEventHandlers() {
        if (this._eventHandlers)
            this._eventHandlers.forEach(({ eventName, handlerMethod }) => {
                const handler = this[handlerMethod as keyof this];
                if (typeof handler === "function")
                    on(this.domNode, eventName, handler.bind(this));
            });
    }

    _processTemplateNode<T extends (Element | Node | _WidgetBase)>(
        baseNode: T,
        getAttrFunc: (baseNode: T, attr: string) => any,
        // tslint:disable-next-line: ban-types
        attachFunc: (node: T, type: string, func?: Function) => dojo.Handle
    ): boolean {
        if (isNode(baseNode)) {
            const w = registry.byNode(baseNode);
            if (w) {
                // from dijit/_WidgetsInTemplateMixin
                this._processTemplateNode(w,
                    (n, p) => n.get(p as any), // callback to get a property of a widget
                    (widget, type, callback) => {
                        if (!callback)
                            throw new Error("The callback must be specified");

                        // callback to do data-dojo-attach-event to a widget
                        if (type in widget) {
                            // back-compat, remove for 2.0
                            return widget.connect(widget, type, callback as EventListener);
                        } else {
                            // 1.x may never hit this branch, but it's the default for 2.0
                            return widget.on(type, callback);
                        }

                    });
                // don't process widgets internals
                return false;
            }
        }
        return super._processTemplateNode(baseNode, getAttrFunc, attachFunc);
    }

    /** Starts current widget and all its supporting widgets (placed outside
     * `containerNode`) and child widgets (placed inside `containerNode`)
     */
    startup() {
        // startup supporting widgets
        registry.findWidgets(this.domNode, this.containerNode).forEach(w => w.startup());
        super.startup();
    }
}