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

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

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

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

    editable: false,

    hideTrigger: false,

    pickerOffset: [0, 0],

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

    config: {
        rows: [],
        acetextarea: null,
        pickerTitle: ""
    },

    initComponent: function() {

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

    updateValues: function() {

        var i_self = this;
        var i_field = i_self.getAcetextarea();

        i_self.suspendCheckChange++;
        i_self.setValue(i_field.getValue());
        i_self.suspendCheckChange--;
    },

    createPicker: function() {

        var i_self = this;

        var i_acetextarea = Ext.widget("acetextarea", {
			hideLabel: true,
			mode: "json",
            asJson: true,
            listeners: {
                change: {
                    fn: function(i_field, value) {
                        if (i_field.isValid()) {
                            i_self.updateValues();
                        }
                    },
                    buffer: 250
                },
                afterrender: {
                    fn: function(i_field) {
                        i_field.on({
                            editorready: {
                                fn: function(item) {
                                    i_field.getEditor().focus(false, 100);
                                },
                                buffer: 100
                            }
                        });
                    }
                }
            }
        });
        

        var i_picker = Ext.widget("panel", {
            layout: "fit",
            height: 300,
            pickerField: i_self,
            ownerCt: i_self.ownerCt,
            renderTo: Ext.getBody(),
            floating: true,
            items: [
                i_acetextarea
            ],
            listeners: {
                afterrender: {
                    fn: function() {
                        var o_value = i_self.getValue() ||  {};
                        i_acetextarea.setValue(o_value);
                    }
                },
                show: {
                    fn: function() {
                        if (i_acetextarea.rendered && i_acetextarea.getEditor()) {
                            i_acetextarea.getEditor().focus(false, 100);
                        }
                    }
                }
            }
        });
        
        i_self.setAcetextarea(i_acetextarea);

        return i_picker;
    },

    setValue: function(value) {

        var i_self = this;
        var i_acetextarea = i_self.getAcetextarea();
        
        if (i_acetextarea && !i_self.suspendCheckChange) {
            i_acetextarea.setValue(value);
        }

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

    getValue: function() {
        
        var i_self = this;

        var value = i_self.value;

        var i_acetextarea = i_self.getAcetextarea();

        if (i_acetextarea) {
            value = i_acetextarea.getValue();
        }
        else {
            value = i_self.mixins.field.getValue.call(i_self);
        }
        return value;
    },

    valueToRaw: function(value) {

        return Ext.encode(value, true) || value;
    },
});