Ext.define("Portfolio.designer.ui.form.layout.Component", {

    extend: "Ext.tree.Panel",

    alias: "widget.form.designer.layout.component",

    useArrows: true,

    rootVisible: false,

    multiSelect: false,

    singleExpand: false,

    split: true,

    config: {
        designer: null,
        entityManager: null,
        entity: null,
        context: "",
        keys: {}
	},
	

    viewConfig: {
        plugins: {
            ptype: "treeviewdragdrop",
            dragGroup: "form"
        }
    },

    initComponent: function() {

        var i_self = this;

        Ext.apply(i_self, {
            store: i_self.createStore(),
            columns: i_self.createColumns()
        });

        i_self.callParent(arguments);

        i_self.setKeys({
            columns: []
        });

        i_self.addListeners();

    },

    addListeners: function() {

        var i_self = this;

        i_self.on({
            afterrender: {
                fn: function (i_treepanel) {

                    var i_store = i_treepanel.getStore();
                    var a_records = i_store.getRange(0);

                    Ext.Array.each(a_records, function (i_record) {
                        i_record.commit();
                    });
                },
                buffer: 10
            }
        });
    },


    createStore: function() {

		var o_container = {
			itemId: "container-root",
			leaf: false,
			expanded: true,
			allowDrop: false,
			allowDrag: false,
			properties: {
				nodeType: "container-root",
				name: {
					da: "Gruppe",
					en: "Group"
				}
			},
			children: []
		};

		var o_fieldSet = {
			itemId: "group-fieldset",
			leaf: true,
			expanded: false,
			allowDrop: false,
			allowDrag: true,
			properties: {
				nodeType: "group",
				xtype: "fieldset",
				name: "Fieldset"
			}
		};

		var o_fieldcontainer = {
			itemId: "group-fieldset",
			leaf: true,
			expanded: false,
			allowDrop: false,
			allowDrag: true,
			properties: {
				nodeType: "group",
				xtype: "fieldcontainer",
				name: "Fieldcontainer"
			}
		};

		var o_tabs = {
			itemId: "group-tabpanel",
			leaf: true,
			expanded: false,
			allowDrop: false,
			allowDrag: true,
			properties: {
                nodeType: "uiLayout",
                name: "tabpanel",
                layoutType: "tabpanel",
                type: "tabpanel"

			}
		};

		var o_layouts = {
			itemId: "layout-root",
			leaf: false,
			expanded: true,
			allowDrop: false,
			allowDrag: false,
			properties: {
				nodeType: "layout-root",
				name: "Panel / Layout"
			},
			children: []
		};

		var o_anchor = {
			itemId: "layout-anchor",
			leaf: true,
			expanded: false,
			allowDrop: false,
			allowDrag: true,
			properties: {
                nodeType: "uiLayout",
				layoutType: "anchor",
				name: "anchor",
				type: "anchor"
			}
		};

		var o_hbox = {
			itemId: "layout-hbox",
			leaf: true,
			expanded: false,
			allowDrop: false,
			allowDrag: true,
			properties: {
                nodeType: "uiLayout",
				layoutType: "hbox",
                name: "hbox",
                type: "hbox"
			}
		};

		var o_vbox = {
			itemId: "layout-vbox",
			leaf: true,
			expanded: false,
			allowDrop: false,
			allowDrag: true,
			properties: {
                nodeType: "uiLayout",
				layoutType: "vbox",
                name: "vbox",
                type: "vbox"
			}
		};

		var o_fit = {
			itemId: "layout-fit",
			leaf: true,
			expanded: false,
			allowDrop: false,
			allowDrag: true,
			properties: {
                nodeType: "uiLayout",
				layoutType: "fit",
				name: "fit",
                type: "fit"
			}
		};

		var o_border = {
			itemId: "layout-border",
			leaf: true,
			expanded: false,
			allowDrop: false,
			allowDrag: true,
			properties: {
                nodeType: "uiLayout",
				layoutType: "border",
				name: "border",
				layout: "border"
			}
		};

		o_layouts.children.push(
			o_anchor,
			o_hbox,
			o_vbox,
			//o_border,
            o_fit,
            o_tabs
		);

		o_container.children.push(
			o_fieldSet,
			o_fieldcontainer
		);

		var i_store = Ext.create("Ext.data.TreeStore", {
			model: "Portfolio.designer.model.domainModelEntityFormDesignerTreeDataModel",
			folderSort: false,
			root: {
				itemId: "components-root",
				expanded: true,
				allowDrop: false,
				allowDrag: false,
				iconCls: "ip2-designer-form",
				properties: {
					nodeType: "component-root",
					name: ip2.i18n({
						da: "Komponenter",
						en: "Componets"
					}),
				},
				children: [
					o_container,
					o_layouts
				]
			}
        });

        return i_store;
    },

    createColumns: function() {

        var a_columns = [{
            xtype: "treecolumn",
            flex: 2,
            sortable: true,
            dataIndex: "properties",
            renderer: function (value) {
                var s_value = value.name;
                return ip2.i18n(s_value, value.name);
            }
        }];

        return a_columns;
    }
});
