import { IgniteProperty } from './ignite-html.js';
import { IgniteTemplate } from './ignite-template.js';

class IgniteElement extends HTMLElement {
    constructor() {
        super();

        this.onDisconnected = null;
        this.template = null;
        this.elements = [];
        this.createProperties();
    }

    /**
     * Returns the properties for this ignite element.
     */
    get properties() {
        return {};
    }

    /**
     * Creates the getters/setters for properties in this
     * ignite element and initializes everything.
     */
    createProperties() {
        var props = this.properties;

        var keys = Object.keys(props);
        for (var i = 0; i < keys.length; i++) {
            var prop = new IgniteProperty();
            this[`_${keys[i]}`] = prop;
            prop._value = props[keys[i]];

            ((propName) => {
                Object.defineProperty(this, propName, {
                    get: function () {
                        return this[`_${propName}`];
                    },

                    set: function (value) {
                        this[`_${propName}`].value = value;
                    }
                });


            })(keys[i]);
        }
    }

    /**
     * Resets the properties for this element back to their original default
     * value.
     */
    resetProperties() {
        var props = this.properties;

        var keys = Object.keys(props);
        for (var i = 0; i < keys.length; i++) {
            this[keys[i]] = props[keys[i]];
        }
    }

    /**
     * Setups this ignite element and constructs it's template when
     * this function is called by the DOM upon this element being created somewhere.
     */
    connectedCallback() {
        //If we don't already have a template, make sure we create one,
        //this can happen if this element was constructed in the DOM instead of within a template.
        if (!this.template) {
            this.template = new IgniteTemplate();
            this.template.element = this;
            this.template.tagName = this.tagName;
        }

        //Add any childNodes we have to the elements list within this
        this.childNodes.forEach((item) => this.elements.push(item));

        //Make sure the render template is our template, if not, add it as a child.
        var renderTemplate = this.render();
        if (renderTemplate !== this.template && renderTemplate) {
            this.template.child(renderTemplate);
        } else if (!renderTemplate) {
            console.warn(`RenderTemplate was null for element: ${this.tagName}, is render() returning null or not returning anything?`);
        }

        //Construct our template.
        this.template.construct(this.parentElement);
    }

    /**
     * Cleanups this element and deconstructs everything when this element is removed from
     * the DOM.
     */
    disconnectedCallback() {
        //If we still have a reference to our template, deconstruct it.
        if (this.template) {
            this.template.deconstruct();
        }

        //If we have a onDisconnected callback, call it and then remove the reference.
        if (this.onDisconnected) {
            this.onDisconnected();
            this.onDisconnected = null;
        }
    }

    /**
     * Returns the template to be rendered for this element.
     */
    render() {
        return null;
    }
}

export {
    IgniteElement
};