var CssGrid = Namespace.declare("tla.EAM.layer5",
    class CssGrid extends UcpComponent {
        static get implements() {
            return [];
        }

        static get overwriteServerDescriptor() {
            return true;
        }

        static get dependencies() {
            return [
                //"/EAMD.ucp/Components/com/twitter/Bootstrap/Accordion/CollapsiblePanel/3.3.7/CollapsiblePanel.component.xml",
                "/EAMD.ucp/Components/org/lesscss/Less/3.8.1/Less.component.xml",
            ];
        }

        static get weBeanUnitPaths() {
            return [
				"./src/html/weBeans/CssGrid.weBean.html",
				//"./src/html/weBeans/CssGridItemView.weBean.html",
				//"./src/html/weBeans/CssGridDetailsView.weBean.html",
			];
        }

        static start() {
            UcpComponentSupport.importLink(this.IOR.loader.basePath + "/src/less/"+this.name+".less", "stylesheet/less", "text/css");
            LessSingleton.compile();
        }

        constructor() {
            super();
        }

        init() {
            super.init();

            const demoModel = {
                name: "CssGrid",
                description: "best layout container",
                badge: "(0, 0)" /*"has to be copied on UcpView.init"*/,
                gridTemplateColumns: "",
                columns: [],
                rows: []
            };
            this.model = demoModel;
            this.model.autoUpdate = true;

            this.actionIndex = Thinglish.createActionIndexOf(CssGrid, this);
            return this;
        }

        add(ucpComponent) {
            if (Thinglish.isInstanceOf(ucpComponent, window.CssGridColumnDefinition)) {
                   this.ucpModel.value.columns.push("1fr");
                   let value = this.ucpModel.value.columns.join(" ");
                   this.gridTemplateColumns = value;
            }
            else {
                super.add(ucpComponent);
            }
        }

        onDomReady(view) {
            if (!(view instanceof DefaultView)) return;
            this.defaultView.documentElement.style.gridTemplateColumns = this.ucpModel.value.gridTemplateColumns;
        }


        /*
        loadWeBean() {
            if (Thinglish.lookupInObject(Relationship, "type.ucpComponentDescriptor.webBeanUnits"))
                return Relationship.type.ucpComponentDescriptor.webBeanUnits.find(u => u.model.name.startsWith(Relationship.name)).weBean;

            return null;
        }
        */

        updateView(view, updateObject) {
            if (!(view instanceof DefaultView)) return;
            
            console.info("ucpComponent updateView", this.id, ...arguments);
            if (!updateObject) {
                return;
            }
            Object.keys(updateObject).forEach(
                member => {
                    switch (member) {
                        case "columns":

                            break;
                        case "property1":
                            //update something for property1
                            break;
                        default:
                            //update something in any case
                    }
                }
            );
        }

        handleSelection(event, item) {
            console.info(this.constructor.name, "selected", item.ucpComponent);
            Action.do(DetailsView.ACTION_SHOW, this);
            //Action.do(Workflow.ACTION_SELECT, item);
        }


        get gridTemplateColumns() {
            return this.ucpModel.value.gridTemplateColumns;
        }
        set gridTemplateColumns(value) {
            this.ucpModel.value.columns = value.split(" ");
            this.ucpModel.value.gridTemplateColumns = value;
            this.defaultView.documentElement.style.gridTemplateColumns = value;
        }

        /*
            createOverView() {
                return new CssGridItemView();
            }
            createDetailsView() {
                return new CssGridDetailsView();
            }
        */
        startSelectWorkflow() {
            console.info(this.constructor.name, "startSelectWorkflow");
        }

        assign() {
            console.info(this.constructor.name, "assign");
        }

        setEmpty() {
            console.info(this.constructor.name, "setEmpty");
        }
    }
);

/*
var CssGridItemView = Namespace.declare("tla.EAM.layer5",
    class CssGridItemView extends UcpView {
        static get implements() { return [ItemView]; }

        init(ucpComponent) {
            super.init(ucpComponent);
            this.badge = "some Value";
            return this;
        }

        update(updateObject) {
            console.info("ucpView update", this.id, ...arguments);
            if (!updateObject) {
                return;
            }
            Object.keys(updateObject).forEach(
                member => {
                    switch (member) {
                        case "badge":
                            //update something for badge
                            break;
                        case "attribute1":
                            //update something for attribute1
                            break;
                        default:
                            //update something in any case
                    }
                }
            );
        }

    }
);


var CssGridDetailsView = Namespace.declare("tla.EAM.layer5",
    class CssGridDetailsView extends UcpView {
        static get implements() { return [DetailsView]; }

        init(ucpComponent) {
            super.init(ucpComponent);

            return this;
        }

        update(updateObject) {
            console.info("ucpView update", this.id, ...arguments);
        }

        onInitDetails() {
            console.info("ucpView onInitDetails", this.id, ...arguments);
            this.details.model.heading += " also from DetailsView";

        }

    }
);

*/