Ext.define("Portfolio.pd.manager.component.field.ItemPicker", {

    xtype: "pd-manager-field-itempicker",

    extend: "Ext.form.field.Picker",

    alias: [
        "widget.pd-manager-field-itempicker"
    ],

    editable: false,

    hideTrigger: false,

    pickerOffset: [0, 0],

    matchFieldWidth: false,

    listeners: {
        focus: {
            fn: function(i_field) {
                i_field.expand();
            }
        }
    },

    config: {
        rows: [],
        multiSelector: null,
        pickerTitle: "",
        property: "name"
    },

    initComponent: function() {

        var i_self = this;
        i_self.callParent(arguments);

        i_self.enableBubble([
            "beforeshow"
        ]);
    },

    updateValues: function() {

        var i_self = this;
        var i_multiselect = i_self.getMultiSelector();

        var a_selected = i_multiselect.getStore().getRange();
        
        var a_return = [];

        var s_property = i_self.getProperty();

        Ext.Array.each(a_selected, function(i_record) {
            a_return.push(i_record.get(s_property));
        });

        i_self.setValue(a_return);
    },

    createPicker: function() {

        var i_self = this;

        var s_property = i_self.getProperty();

        var i_itemStore = Ext.create("Ext.data.Store", {
            fields: [
                {
                    name: s_property,
                    type: "auto"
                }
            ],
            data: i_self.getRows()
        });

        var i_multiselect = Ext.widget("multiselector", {
            header: {
                cls: "x-window-header-default",
                title: {
                    style: {
                        color: "white"
                    }
                }
            },
            xtype: "multiselector",
            fieldName: s_property,
            removeRowText: "\ed1d",
            removeRowTip: ip2.i18n({
                da: "Fjern",
                en: "Remove"
            }),
            addToolText: ip2.i18n({
                da: "Søg efter items at tilføje",
                en: "Search after items to add"
            }),
            renderRemoveRow: function() {
                return "<span style=\"padding-right:8px;\" class=\"pf-navigate_cross\" data-qtip=" + this.removeRowTip + " role=\"button\" tabIndex=\"0\"></span>";
            },
            emptyText: ip2.i18n({
                da: "Intet valgt",
                en: "Nothing selected"
            }),
            viewConfig: {
                plugins: {
                    gridviewdragdrop: {
                        dragText: "Drag and drop to reorganize"
                    }
                }
            },
            search: {
                field: s_property,
                searchText: ip2.i18n({
                    da: "Søg",
                    en: "Search"
                }),
                store: i_itemStore
            },
            listeners: {
                afterrender: {
                    fn: function() {

                        var i_header = i_multiselect.getHeader();
                        var i_titleCmp = i_header.titleCmp;

                        if (i_titleCmp) {
                            i_titleCmp.setText(i_self.getPickerTitle() || "Selected item");
                        }

                        i_header.tools.plus.setStyle("marginLeft", "4px");
                        
                        var i_el = i_header.tools.plus.toolEl;

                        i_el.dom.style.setProperty("color", "white", "important");
                    },
                    buffer: 100
                }
            }
        });

        var i_store = i_multiselect.getStore();

        i_store.on({
            add: {
                fn: function() {
                    i_self.updateValues();
                },
                buffer: 10
            },
            remove: {
                fn: function() {
                    i_self.updateValues();
                },
                buffer: 10
            }
        });

        var i_picker = Ext.widget("panel", {
            layout: "fit",
            height: 300,
            width: 500,
            pickerField: i_self,
            ownerCt: i_self.ownerCt,
            renderTo: Ext.getBody(),
            floating: true,
            items: [
                i_multiselect
            ],
            listeners: {
                afterrender: {
                    fn: function() {

                        var a_value = i_self.getValue() || [];

                        var o_search = i_multiselect.getSearch();
                        var i_popup = i_multiselect.searchPopup;
                        var i_searchStore = o_search.store;
                        var i_multiStore = i_multiselect.getStore();
                        var a_records = i_searchStore.getRange();

                        var a_selected = [];

                        var s_property = i_self.getProperty();

                        Ext.Array.each(a_value, function(s_value) {

                            var i_selected = Ext.Array.findBy(a_records, function(i_record) {
                                return i_record.get(s_property) == s_value;
                            });

                            if (i_selected) {
                                a_selected.push(i_selected);
                            }

                        });

                        i_multiStore.loadData(a_selected);

                        if (i_popup) {
                            i_popup.selectRecords(a_selected);
                        }
                    }
                },
                beforeshow: {
                    fn: function(i_field) {
                        i_self.fireEvent("beforeshow", i_self);
                    }
                },
                show: {
                    fn: function() {

                        var a_value = i_self.getValue() || [];

                        var o_search = i_multiselect.getSearch();
                        var i_popup = i_multiselect.searchPopup;
                        var i_searchStore = o_search.store;
                        var i_multiStore = i_multiselect.getStore();
                        var a_records = i_searchStore.getRange();

                        var a_selected = [];

                        var s_property = i_self.getProperty();

                        Ext.Array.each(a_value, function(s_value) {

                            var i_selected = Ext.Array.findBy(a_records, function(i_record) {
                                return i_record.get(s_property) == s_value;
                            });

                            if (i_selected) {
                                a_selected.push(i_selected);
                            }
                        });

                        i_multiStore.loadData(a_selected);

                        if (i_popup) {
                            i_popup.selectRecords(a_selected);
                        }
                    }
                }
            }
        });
        

        i_self.setMultiSelector(i_multiselect);

        return i_picker;
    },

    getValue: function() {

        var i_self = this;
        var i_multiselect = i_self.getMultiSelector();

        var a_return = [];

        if (i_multiselect) {

            var s_property = i_self.getProperty();

            var i_store = i_multiselect.getStore();
            var a_records = i_store.getRange();

            Ext.Array.each(a_records, function(i_record) {
                a_return.push(i_record.get(s_property));
            });
        }
        else {
            a_return = i_self.mixins.field.getValue.call(i_self);
        }
        

        return a_return;
    },

    setValue: function(value) {

        var i_self = this;
        var i_multiselect = i_self.getMultiSelector();

        if (Ext.isString(value)) {
            value = [
                value
            ];
        }

        var a_values = Ext.Array.from(value);

        if (i_multiselect) {

            var o_search = i_multiselect.getSearch();
            var i_popup = i_multiselect.searchPopup;
            var i_searchStore = o_search.store;
            var i_multiStore = i_multiselect.getStore();
            var a_records = i_searchStore.getRange();

            var a_selected = [];

            var s_property = i_self.getProperty();

            Ext.Array.each(a_values, function(s_value) {

                var i_selected = Ext.Array.findBy(a_records, function(i_record) {
                    return i_record.get(s_property) == s_value;
                });

                if (i_selected) {
                    a_selected.push(i_selected);
                }

            });

            i_multiStore.loadData(a_selected);

            if (i_popup) {
                i_popup.selectRecords(a_selected);
            }
        }

        i_self.callOverridden([a_values]);
        
        i_self.value = a_values;
        i_self.mixins.field.setValue.call(i_self, a_values);
        
       
    }
});