/**
 * This class implements the form that allows changing the field settings.
 */
Ext.define('Ext.pivot.plugin.configurator.Form', {
    extend: 'Ext.form.Panel',
 
    requires: [
        'Ext.pivot.plugin.configurator.store.Select',
        'Ext.pivot.plugin.configurator.FormController',
        'Ext.form.FieldSet',
        'Ext.field.Toggle',
        'Ext.field.Select',
        'Ext.field.Radio',
        'Ext.field.Text',
        'Ext.field.Hidden',
        'Ext.layout.VBox',
        'Ext.layout.HBox',
        'Ext.TitleBar'
    ],
 
    xtype: 'pivotconfigform',
    
    /**
     * @cfg controller
     * @inheritdoc
     */
    controller: 'pivotconfigform',
    
    /**
     * @cfg viewModel
     * @inheritdoc
     */
    viewModel: {
        stores: {
            sFormatters: {
                type: 'pivotselect'
            },
            sAggregators: {
                type: 'pivotselect'
            },
            sSorters: {
                type: 'pivotselect'
            },
            sFilters: {
                type: 'pivotselect'
            },
            sOperators: {
                type: 'pivotselect'
            },
            sTopOrder: {
                type: 'pivotselect'
            },
            sTopType: {
                type: 'pivotselect'
            },
            sDimensions: {
                type: 'pivotselect'
            },
            sAlign: {
                type: 'pivotselect'
            }
        },
        data: {
            requiredMessage: null,
            labelFilterText: null,
            valueFilterText: null
        },
        formulas: {
            filterType: {
                bind: {
                    bindTo: '{form.filter.type}',
                    deep: true
                },
 
                get: function(record) {
                    return record && record.isModel ? record.get('value') : record;
                }
            },
            filterOperator: {
                bind: {
                    bindTo: '{form.filter.operator}',
                    deep: true
                },
 
                get: function(record) {
                    return record && record.isModel ? record.get('value') : record;
                }
            },
            filterOperatorValue: {
                // eslint-disable-next-line max-len
                bind: '{filterCommon && !(filterOperator === "between" || filterOperator === "not between")}',
                get: function(v) {
                    return v;
                }
            },
            filterOperatorBetween: {
                // eslint-disable-next-line max-len
                bind: '{filterCommon && (filterOperator === "between" || filterOperator === "not between")}',
                get: function(v) {
                    return v;
                }
            },
            filterCommon: {
                bind: '{filterType === "label" || filterType === "value"}',
                get: function(v) {
                    return v;
                }
            },
            filterLabel: {
                bind: '{filterType === "label"}',
                get: function(v) {
                    return v;
                }
            },
            filterValue: {
                bind: '{filterType === "value"}',
                get: function(v) {
                    return v;
                }
            },
            filterTop10: {
                bind: '{filterType === "top10"}',
                get: function(v) {
                    return v;
                }
            }
        }
    },
 
    eventedConfig: {
        fieldItem: null,
        title: null
    },
 
    /**
     * @cfg listeners
     * @inheritdoc
     */
    listeners: {
        fielditemchange: 'onFieldItemChanged'
    },
 
    /**
     * @cfg defaults
     * @inheritdoc
     */
    defaults: {
        xtype: 'fieldset',
        defaults: {
            labelAlign: 'top'
        }
    },
 
    /**
     * @cfg showAnimation
     * @inheritdoc
     */
    showAnimation: {
        type: 'slideIn',
        duration: 250,
        easing: 'ease-out',
        direction: 'left'
    },
 
    /**
     * @cfg hideAnimation
     * @inheritdoc
     */
    hideAnimation: {
        type: 'slideOut',
        duration: 250,
        easing: 'ease-in',
        direction: 'right'
    },
 
    okText: 'Ok',
    cancelText: 'Cancel',
    formatText: 'Format as',
    summarizeByText: 'Summarize by',
    customNameText: 'Custom name',
    sourceNameText: 'The source name for this field is "{form.dataIndex}"',
    sortText: 'Sort',
    filterText: 'Filter',
    sortResultsText: 'Sort results',
    alignText: 'Align',
    alignLeftText: 'Left',
    alignCenterText: 'Center',
    alignRightText: 'Right',
 
    caseSensitiveText: 'Case sensitive',
    valueText: 'Value',
    fromText: 'From',
    toText: 'To',
    labelFilterText: 'Show items for which the label',
    valueFilterText: 'Show items for which',
    top10FilterText: 'Show',
 
    sortAscText: 'Sort A to Z',
    sortDescText: 'Sort Z to A',
    sortClearText: 'Disable sorting',
    clearFilterText: 'Disable filtering',
    labelFiltersText: 'Label filters',
    valueFiltersText: 'Value filters',
    top10FiltersText: 'Top 10 filters',
 
    equalsLText: 'equals',
    doesNotEqualLText: 'does not equal',
    beginsWithLText: 'begins with',
    doesNotBeginWithLText: 'does not begin with',
    endsWithLText: 'ends with',
    doesNotEndWithLText: 'does not end with',
    containsLText: 'contains',
    doesNotContainLText: 'does not contain',
    greaterThanLText: 'is greater than',
    greaterThanOrEqualToLText: 'is greater than or equal to',
    lessThanLText: 'is less than',
    lessThanOrEqualToLText: 'is less than or equal to',
    betweenLText: 'is between',
    notBetweenLText: 'is not between',
    topOrderTopText: 'Top',
    topOrderBottomText: 'Bottom',
    topTypeItemsText: 'Items',
    topTypePercentText: 'Percent',
    topTypeSumText: 'Sum',
 
    requiredFieldText: 'This field is required',
    operatorText: 'Operator',
    dimensionText: 'Dimension',
    orderText: 'Order',
    typeText: 'Type',
 
    updateFieldItem: function(item) {
        var me = this,
            items, field;
 
        me.removeAll(true, true);
 
        if (!item) {
            return;
        }
 
        field = item.getField();
        items = [{
            xtype: 'titlebar',
            docked: 'top',
            titleAlign: 'left',
            bind: {
                title: '{form.header}'
            },
            items: [{
                text: me.cancelText,
                align: 'right',
                ui: 'alt',
                handler: 'cancelSettings'
            }, {
                text: me.okText,
                align: 'right',
                ui: 'alt',
                handler: 'applySettings',
                margin: '0 0 0 5'
            }]
        }, {
            bind: {
                instructions: me.sourceNameText
            },
            items: [{
                label: me.customNameText,
                xtype: 'textfield',
                name: 'header',
                required: true,
                requiredMessage: me.requiredFieldText,
                bind: '{form.header}'
            }]
        }];
 
        if (field.isAggregate) {
            items.push({
                items: [{
                    label: me.alignText,
                    xtype: 'selectfield',
                    autoSelect: false,
                    useClearIcon: true,
                    name: 'align',
                    bind: {
                        store: '{sAlign}',
                        value: '{form.align}'
                    }
                }, {
                    label: me.formatText,
                    xtype: 'selectfield',
                    autoSelect: false,
                    useClearIcon: true,
                    name: 'formatter',
                    bind: {
                        store: '{sFormatters}',
                        value: '{form.formatter}'
                    }
                }, {
                    label: me.summarizeByText,
                    xtype: 'selectfield',
                    autoSelect: false,
                    useClearIcon: true,
                    name: 'aggregator',
                    bind: {
                        store: '{sAggregators}',
                        value: '{form.aggregator}'
                    }
                }]
            });
        }
        else {
            items.push({
                xtype: 'fieldset',
                items: [{
                    label: me.sortText,
                    labelAlign: 'top',
                    xtype: 'selectfield',
                    autoSelect: false,
                    useClearIcon: true,
                    name: 'sort',
                    bind: {
                        store: '{sSorters}',
                        value: '{form.direction}'
                    }
                }, {
                    label: me.filterText,
                    labelAlign: 'top',
                    xtype: 'selectfield',
                    autoSelect: false,
                    useClearIcon: true,
                    name: 'filter',
                    bind: {
                        store: '{sFilters}',
                        value: '{form.filter.type}'
                    },
                    listeners: {
                        change: 'onChangeFilterType'
                    }
                }]
            }, {
                defaults: {
                    labelAlign: 'top'
                },
                bind: {
                    hidden: '{!filterCommon}',
                    title: '{filterLabel ? labelFilterText : valueFilterText}'
                },
                items: [{
                    xtype: 'selectfield',
                    autoSelect: false,
                    placeholder: me.dimensionText,
                    name: 'dimensionId',
                    bind: {
                        store: '{sDimensions}',
                        value: '{form.filter.dimensionId}',
                        hidden: '{!filterValue}',
                        required: '{filterValue}',
                        requiredMessage: '{filterValue ? requiredMessage : null}'
                    }
                }, {
                    xtype: 'selectfield',
                    autoSelect: false,
                    placeholder: me.operatorText,
                    name: 'operator',
                    bind: {
                        store: '{sOperators}',
                        value: '{form.filter.operator}',
                        required: '{filterCommon}',
                        requiredMessage: '{filterCommon ? requiredMessage : null}'
                    }
                }, {
                    xtype: 'textfield',
                    placeholder: me.valueText,
                    name: 'value',
                    bind: {
                        value: '{form.filter.value}',
                        hidden: '{filterOperatorBetween}',
                        required: '{filterOperatorValue}',
                        requiredMessage: '{filterOperatorValue ? requiredMessage : null}'
                    }
                }, {
                    xtype: 'textfield',
                    placeholder: me.fromText,
                    name: 'from',
                    bind: {
                        value: '{form.filter.from}',
                        hidden: '{filterOperatorValue}',
                        required: '{filterOperatorBetween}',
                        requiredMessage: '{filterOperatorBetween ? requiredMessage : null}'
                    }
                }, {
                    xtype: 'textfield',
                    placeholder: me.toText,
                    name: 'to',
                    bind: {
                        value: '{form.filter.to}',
                        hidden: '{filterOperatorValue}',
                        required: '{filterOperatorBetween}',
                        requiredMessage: '{filterOperatorBetween ? requiredMessage : null}'
                    }
                }, {
                    xtype: 'togglefield',
                    label: me.caseSensitiveText,
                    name: 'caseSensitive',
                    bind: '{form.filter.caseSensitive}'
                }]
            }, {
                xtype: 'fieldset',
                title: me.top10FilterText,
                defaults: {
                    labelAlign: 'top'
                },
                bind: {
                    hidden: '{!filterTop10}'
                },
                items: [{
                    xtype: 'selectfield',
                    autoSelect: false,
                    placeholder: me.orderText,
                    name: 'topOrder',
                    bind: {
                        store: '{sTopOrder}',
                        value: '{form.filter.topOrder}',
                        required: '{filterTop10}',
                        requiredMessage: '{filterTop10 ? requiredMessage : null}'
                    }
                }, {
                    xtype: 'textfield',
                    placeholder: me.valueText,
                    name: 'topValue',
                    bind: {
                        value: '{form.filter.value}',
                        required: '{filterTop10}',
                        requiredMessage: '{filterTop10 ? requiredMessage : null}'
                    }
                }, {
                    xtype: 'selectfield',
                    autoSelect: false,
                    placeholder: me.typeText,
                    name: 'topType',
                    bind: {
                        store: '{sTopType}',
                        value: '{form.filter.topType}',
                        required: '{filterTop10}',
                        requiredMessage: '{filterTop10 ? requiredMessage : null}'
                    }
                }, {
                    xtype: 'selectfield',
                    autoSelect: false,
                    placeholder: me.dimensionText,
                    name: 'topDimensionId',
                    bind: {
                        store: '{sDimensions}',
                        value: '{form.filter.dimensionId}',
                        required: '{filterTop10}',
                        requiredMessage: '{filterTop10 ? requiredMessage : null}'
                    }
                }, {
                    xtype: 'togglefield',
                    label: me.sortResultsText,
                    name: 'topSort',
                    bind: '{form.filter.topSort}'
                }]
            });
        }
 
        me.add(items);
    }
});