var JavaScriptObject = Namespace.declare("tla.EAM.layer2",
    class JavaScriptObject extends UcpComponent {
        static start() {}
        static dependencies() {
            return [
                "/EAMD.ucp/Components/com/twitter/Bootstrap/Accordion/CollapsiblePanel/1.0.0/CollapsiblePanel.component.xml",
                "/EAMD.ucp/Components/ski/kornel/SlipJS/2.1.1/SlipJS.component.xml",
                "/EAMD.ucp/Components/com/twitter/Bootstrap/Breadcrumb/1.0.0/Breadcrumb.component.xml"
                //"/EAMD.ucp/Components/tla/EAM/layer3/WODAViews/1.0.0/WODAViews.component.xml"
            ];
        }


        constructor() {
            super();
        }

        init(object) {
            if (this.isInitialized)
                return;
            super.init();

            this.model = object;

            return this;
        }


        get defaultView() {
            return super.itemView;
        }
        get itemView() {
            if (!this.controller) return null;
            return this.controller.getCustomView(ItemView, this.ucpModel);
        }
        createItemView() {
            if (!this.controller) return null;
            return new DefaultItemView();
        }

        get overView() {
            if (!this.controller) return null;
            return this.controller.getCustomView(OverView, this.ucpModel);
        }
        createOverView() {
            return new DefaultOverView();
        }

        get detailsView() {
            if (!this.controller) return null;
            return this.controller.getCustomView(DetailsView, this.ucpModel);
        }
        createDetailsView() {
            return new DefaultDetailView();
        }

        handleSelection(event, item) {
            console.debug(this.constructor.name + ": handleSelection", item);
            event.source.duringFire = false;
            this.eventSupport.fire("selected", event.source, item);
        }


    }
);

var DefaultItemView = Namespace.declare("tla.EAM.layer5",
    class DefaultItemView extends ItemView {
        init(ucpComponent) {
            // @todo consolidate View init.... either ucpComponent or ucpController
            var controller = ucpComponent.controller;
            if (ucpComponent instanceof UcpController)
                controller = ucpComponent;

            super.init(controller);
            //var description = this.ucpModel.properties.description;
            //this.ucpModel.properties.description = "DefaultItemView: " + description;

            return this;
        }

        add(component) {
            this.parent.add(component);
        }

        get name() {
            if (!this.model)
                return this.constructor.name;
            if (!this.properties)
                return null;

            var name = this.properties.name;
            if (!name)
                name = this.model.name;
            if (!name)
                name = this.model.id;
            if (!name)
                name = this.model.constructor.name;

            if (Thinglish.isClass(this.model))
                name = "Class: " + name;

            if (!this.properties.name) {
                if (Array.isArray(this.model))
                    name = Thinglish.getTypeName(this.model);
            }

            return name;
        }
        set name(newValue) {
            if (!this.properties)
                return null;
            this.properties.name = newValue;
        }

        get cssClasses() {
            var cssClasses = this.properties.cssClasses;
            if (!cssClasses)
                cssClasses = "";
            return cssClasses;
        }
        get href() {
            var href = this.properties.href;
            if (!href)
                href = "#";
            return href;
        }
        set href(newValue) {
            this.properties.href = newValue;
        }
        get target() {
            var target = this.properties.target;
            if (!target)
                target = "_self";
            return target;
        }
        set target(newValue) {
            this.properties.target = newValue;
        }
        get badge() {
            var badge = this.properties.badge;
            if (Array.isArray(this.model))
                badge = new String(this.model.length).valueOf();
            if (!badge)
                badge = "1";
            return badge;
        }
        set badge(newValue) {
            this.properties.badge = newValue;
        }

        get description() {
            var description = this.properties.description;
            if (!description) description = Thinglish.lookupInObject(this, "ucpComponent.type.ucpComponentDescriptor.properties.description");
            if (!description) description = "";
            if (Thinglish.lookupInObject(this, "model.type.name"))
                description = this.model.type.name + ": " + description;

            if (this.model instanceof StructrObject)
                description = "StructrObject: " + this.model.structrType;

            return description;
        }
        set description(newValue) {
            this.properties.description = newValue;
            this.update();
        }

        select() {
            /*
            if (this.isActive) {
                this.documentElement.classList.remove("active");
            } else {
                if (this.href == "#") {
                    this.documentElement.classList.add("active");
                }
            }
            */
            console.info("select", this.ucpModel._private.model);
            this.ucpComponent.eventSupport.fire("selected", this, this.ucpModel);
        }

        append(element) {
            super.append(element);
        }

        replace(element) {
            super.replace(element);
        }

        get isActive() {
            return this.documentElement.classList.contains("active");
        }

        status() {
            window.status = 'text to display in status bar';
            return true;
        }
    }
);



var DefaultOverView = Namespace.declare("tla.EAM.layer5",
    class DefaultOverView extends OverView {
        init(object) {
            var ucpComponent = UcpComponentSupport.getUcpComponent4Object(object);
            super.init(ucpComponent.controller);

            return this;
        }

        get description() {
            var description = this.properties.description;
            if (!description) description = Thinglish.lookupInObject(this, "ucpComponent.type.ucpComponentDescriptor.properties.description");
            if (!description) description = "";
            if (Thinglish.lookupInObject(this, "model.type.name"))
                description = this.model.type.name + ": " + description;

            if (this.model instanceof StructrObject)
                description = "StructrObject: " + this.model.structrType;

            return description;
        }

        get typeName() {
            return Thinglish.getTypeName(this.model);
        }

        select() {
            console.debug("select", this.ucpModel._private.model);
        }

        append(element) {
            super.append(element);
            //if (Array.isArray(this.model))
            /*
            if (!this.breadcrum) {
                this.breadcrum = Breadcrumb.getInstance().init();
                this.breadcrum.model = this.model;
                this.breadcrum.defaultView.append(element);
            }
            */
            this.slipList.appendItem(this.model);
            this.slipList.eventSupport.addEventListener("selected", this.ucpComponent, this.ucpComponent.handleSelection.bind(this.ucpComponent));
            /*else {
                // get all collections
                var p = null;
                var attributes = [];
                // StructrObjects properties from Structr
                var properties = this.model.properties;
                // StructrObject attributes locally
                //var test = this.properties;
                for (p in properties) {
                    attributes.push(p);
                    var value = properties[p];
                    if (Array.isArray(value)) {
                        this.slipList.appendItem({ name: p, description: "Collection of " + this.model.id, badge: value.length, model: value, href: "#" });
                    }
                }
            }*/

        }

        replace(element) {
            super.replace(element);
        }

        get slipList() {
            return this.documentElement.children[1].ucpView.ucpComponent;
        }

    }
);



var DefaultDetailView = Namespace.declare("tla.EAM.layer5",
    class DefaultDetailView extends DetailsView {
        init(ucpComponent) {
            var controller = ucpComponent.controller;
            if (ucpComponent instanceof UcpController)
                controller = ucpComponent;

            super.init(controller);
            //var description = this.ucpModel.properties.description;
            //this.ucpModel.properties.description = "DefaultDetailView: " + description;

            return this;
        }

        select() {
            if (this.isActive) {
                this.documentElement.classList.remove("active");
                this.ucpModel.ucpComponent.detailView.append();
            } else
                this.documentElement.classList.add("active");

            console.debug("select", this.ucpModel._private.model);
        }

        append(element) {
            super.append(element);
            let p = null;
            const pd = Object.getOwnPropertyDescriptors(this.properties);
            for (p in pd) {
                const value = this.properties[p];
                pd[p].name = p;
                if (Thinglish.isPrimitive(value)) {
                    this.propertyList.appendItem(pd[p]);
                } else {
                    //value.name = p;
                    if (Array.isArray(value)) {
                        this.collectionsList.appendItem(value);
                    } else {
                        if (value.name && !value.name.startsWith("_"))
                                this.relationshipsList.appendItem(value);
                    }
                }
            }
            console.debug(pd);

            // add methodsList
            var methods = Thinglish.getAllMethodDescriptors(this.model);
            console.debug(methods);
            methods.forEach(m => {
                this.methodsList.appendItem(m);                    
            });


        }

        replace(element) {
            super.replace(element);
        }

        get isActive() {
            return this.documentElement.classList.contains("active");
        }

        get propertyList() {
            return this.documentElement.children[0].children[1].children[0].children[0].children[0].ucpView.ucpComponent;
        }

        get relationshipsList() {
            return this.documentElement.children[1].children[1].children[0].children[0].children[0].ucpView.ucpComponent;
        }
        get collectionsList() {
            return this.documentElement.children[2].children[1].children[0].children[0].children[0].ucpView.ucpComponent;
        }
        get methodsList() {
            return this.documentElement.children[3].children[1].children[0].children[0].children[0].ucpView.ucpComponent;
        }



    }
);