Ext.define("App.view.SettingContainer", {
    extend: "Ext.container.Container",
    xtype: "settingContainer",
    alias: "widget.settingContainer",

    layout: "fit",

    params: {},
    initComponent: function() {
        var me = this;

        Ext.apply(me, {
            items: [
                {
                    xtype: "settingPanel"
                }
            ]
        });

        me.callParent(arguments);
    }
});

Ext.define("App.view.SettingPanel", {
    extend: "Ext.grid.Panel",
    alias: "widget.settingPanel",
    xtype: "settingPanel",
    title: "Settings",
    scrollable: true,

    validation: function(category, value) {
        if (category) {
            if (category.indexOf("/") >= 0) {
                var arr = category.split("/");
                for (k in arr) {
                    App.log(arr[k]);
                    App.log(value);
                    App.log(arr[k] == value);
                    if (arr[k] == value) return true;
                }
                return false;
            } else if ("number" == category.toLowerCase()) {
                return App.isNumber(value);
            } else if ("integer" == category.toLowerCase()) {
                return App.isInt(value);
            } else if ("float" == category.toLowerCase()) {
                return App.isFloat(value);
            } else if ("string" == category.toLowerCase()) {
                return true;
            } else if ("boolean" == category.toLowerCase()) {
                if (App.isInt(value) || value.toLowerCase() == "true" || value.toLowerCase() == "false") {
                    return true;
                }
            }
            return true;
        } else {
            return true;
        }
    },

    initComponent: function() {
        var me = this;
        Ext.apply(me, {
            store: Ext.create("App.store.SettingStore").load(),
            plugins: {
                rowediting: {
                    clicksToEdit: 2,
                    //clicksToMoveEditor: 1,
                    //autoCancel: false,
                    listeners: {
                        canceledit: function(editor, context) {
                            if (context.record.phantom && !context.record.dirty) {
                                me.getStore().remove(context.record);
                            }
                        },
                        edit: function(editor, context) {
                            var data = context.record.getData();

                            if (me.validation(data.category, data.value)) {
                                if (typeof data.id != "number") delete data.id;

                                Ext.Ajax.request({
                                    url: App.url("/setting/save"),
                                    params: data,
                                    success: function(response, opts) {
                                        App.showMsg("Saved");
                                        me.getStore().reload();
                                    },
                                    failure: function(response, opts) {
                                        App.showError("Action failed<br>Code: " + response.status);
                                    },
                                    scope: this
                                });
                            } else {
                                context.record.reject();
                                App.showWarning("Wrong input");
                            }
                        }
                    }
                }
            },
            columns: [
                {
                    text: "name",
                    dataIndex: "name",
                    width: 250
                },
                {
                    text: "Type",
                    dataIndex: "type",
                    width: 100
                },
                {
                    text: "Value",
                    dataIndex: "value",
                    width: 228,
                    cls: "editableCell",
                    editor: {
                        xtype: "textfield",
                        maxLength: 1000,
                        enforceMaxLength: true,
                        allowBlank: false
                    }
                },
                {
                    text: "Description",
                    dataIndex: "description",
                    flex: 2,
                    renderer: function(value, metaData, record, rowIndex, colIndex, store) {
                        if (metaData && value) metaData.tdAttr = 'data-qtip="' + value + '"';
                        return value;
                    }
                },
                {
                    flex: 2
                }
            ]
        });
        me.callParent();
    }
});
