/*
 * This file belongs to Hoist, an application development toolkit
 * developed by Extremely Heavy Industries (www.xh.io | info@xh.io)
 *
 * Copyright © 2017 Extremely Heavy Industries Inc.
 */


XH.defineView('XH.cube.DimensionChooser', {
    extend: Ext.Panel,
    mixins: [XH.cube.BaseDimensionChooser],
    xtype: 'xhDimChooser',

    cls: 'xh-dimchooser-dim',

    layout: {type: 'vbox', align: 'stretch'},

    _store: null,
    _value: null,

    bbar: {
        items: [
            '->',
            {
                glyph: XH.Glyph.X,
                cls: 'red-glyph',
                handler: 'up.onClose'
            },
            {
                text: 'Apply',
                glyph: XH.Glyph.CHECK,
                cls: 'green-glyph',
                handler: 'up.onApply'
            }
        ]
    },

    initComponent() {
        this.callParent();

        const qDims = this._value = this.getQueryDims(),
            store = this._store = this.buildDimStore(qDims[0]).store,
            levels = this.getMaxDepth();

        for (let i = 0; i < levels; i++) {
            const ct = this.buildDimensionContainer(store, i);

            if (i > 0) {
                this.addLevelIndentation(ct, i);
            }

        }

        this.syncButtonValues();
    },

    reset() {
        this.setValue(this.getQueryDims());
    },

    //------------------------
    // Implementation
    //------------------------
    addLevelIndentation(container, count) {
        const indents = [];
        for (let i = 0; i < count; i++) {
            let cls = 'xh-dimension-indentation';
            if (i === count - 1) cls += ' xh-last';

            indents.push({
                xtype: 'component',
                width: 8,
                cls: cls
            });
        }

        container.insert(0, indents);
    },

    buildDimensionContainer(store, idx) {
        const combo = Ext.widget({
                xtype: 'combobox',
                _index: idx,
                queryMode: 'local',
                valueField: 'name',
                displayField: 'displayName',
                store: new Ext.data.ChainedStore({
                    source: store
                }),
                listeners: {
                    change: this.onComboChanged,
                    scope: this
                },
                flex: 1,
                editable: false
            }),

            removeButton = Ext.widget({
                xtype: 'button',
                glyph: XH.Glyph.REMOVE,
                hidden: true,
                handler: this.onRemoveClick,
                scope: this
            }),

            addButton = Ext.widget({
                xtype: 'button',
                glyph: XH.Glyph.ADD,
                hidden: true,
                handler: this.onAddClick,
                scope: this
            });

        return this.add({
            xtype: 'container',
            layout: {type: 'hbox', align: 'stretch'},
            defaults: {margin: 2},
            flex: 1,
            hidden: true,
            _buttons: {combo, removeButton, addButton},
            items: [combo, removeButton, addButton]
        });
    },

    getMaxDepth() {
        return this.maxDepth || this._store.getCount() - 1;
    },

    onAddClick(btn) {
        const ct = btn.up('container'),
            nextCt = ct.nextSibling(),
            nextCombo = nextCt._buttons.combo,
            store = nextCombo.getStore();

        this.setValue(this.getValue().concat(store.getAt(0).get('name')));
        nextCombo.expand();

        this.fireEvent('dimensionAdded', nextCombo);
    },

    onRemoveClick(btn) {
        const value = this.getValue().slice(0);
        value.splice(-1, 1);
        this.setValue(value);

        this.fireEvent('dimensionRemoved', btn.previousNode('combobox'));
    },

    onApply() {
        const value = this.getValue();

        if (!Ext.Array.equals(this.getQueryDims(), value)) {
            this.getCubeView().updateQuery({dimensions: value});
            this.fireEvent('change', this, value);
        }

        this.getRefOwner().hide();
    },

    onClose() {
        this.getRefOwner().hide();
    },

    onComboChanged(combo, value) {
        if (!this.getValue()|| !value) return;

        let values = this.getValue().slice(0),
            removed = false;

        const idx = values.indexOf(value);

        if (idx !== -1 || this.isLeafDim(value)) {
            values = values.slice(0, idx);
            removed = true;
        }

        values.splice(combo._index, 1, value);

        this.setValue(values);

        if (removed) {
            this.fireEvent('dimensionRemoved');
        }

        this.syncButtonValues();
    },

    getValue() {
        return this._value;
    },

    setValue(value) {
        this._value = value;
        this.syncButtonValues();
    },

    syncButtonValues() {
        const values = this.getValue(),
            items = this.items;

        items.each((item, idx) => {
            const val = values[idx],
                {combo, addButton, removeButton} = item._buttons,
                hidden = (val == null),
                shouldFilter = idx > 0;

            item.setHidden(hidden);

            if (shouldFilter) {
                const store = combo.getStore();
                store.clearFilter(true);

                if (values[idx - 1]) {
                    store.filter(rec => !values.slice(0, idx).includes(rec.get('name')));
                }
            }

            combo.suspendEvents();
            combo.setValue(val);
            combo.resumeEvents(true);

            const record = combo.getSelectedRecord(),
                isLeafDim = record && this.isLeafDim(record.get('name'));

            if (idx) {
                const maxLevels = this.getMaxDepth(),
                    isLastBtn = idx == values.length - 1;

                addButton.setHidden(
                    !isLastBtn ||
                    idx + 1 >= maxLevels ||
                    !record ||
                    isLeafDim
                );

                removeButton.setHidden(!isLastBtn);
            } else {
                addButton.setHidden(values.length > 1 || isLeafDim);
            }
        });
    }
});