<link rel="import" href="../../bower_components/polymer/polymer.html" />

<link rel="import" href="../../bower_components/paper-tabs/paper-tabs.html">
<link rel="import" href="../../bower_components/paper-tabs/paper-tab.html">

<link rel="import" href="../../bower_components/neon-animation/neon-animation.html">
<link rel="import" href="../../bower_components/neon-animation/neon-animatable.html">
<link rel="import" href="../../bower_components/neon-animation/neon-animations.html">

<link rel="import" href="../../datalets/dynamic-datatable-datalet/dynamic-datatable-datalet.html" />

<dom-module id="multi-table-controllet">

    <template>

        <style is="custom-style">

            paper-tabs {
                font-family: 'Roboto', 'Helvetica Neue', Helvetica, Arial, sans-serif;
                font-size: 16px;
                font-weight: bold;
                --paper-tabs-selection-bar-color: #2196F3;
            }

            paper-tab {
                transition: all 1.0s;
            }

            paper-tab.iron-selected{
                background-color: #B6B6B6;
            }

            paper-tab:hover {
                color: #2196F3;
            }

            #multi_table_container {
                height: 100%;
                width: 100%;

                font-family: 'Roboto', 'Helvetica Neue', Helvetica, Arial, sans-serif;
                font-size: 16px;
            }

            #multi_table_tables {
                position: relative;
                height: calc(100% - 48px);
            }

        </style>

        <div id="multi_table_container">

            <paper-tabs selected="{{selected}}">
                <template id="dom-tabs" is="dom-repeat" items="{{_toArrayTabs(selectedFields)}}">
                    <paper-tab noink>{{item.name}}</paper-tab>
                </template>
            </paper-tabs>

            <div id="multi_table_tables">
                <neon-animated-pages selected="{{selected}}" entry-animation="fade-in-animation" exit-animation="fade-out-animation">
                    <template id="dom_pages" is="dom-repeat" items="{{_toArrayPages(selectedFields)}}">
                        <neon-animatable>
                                <dynamic-datatable-datalet id="{{item.name}}" data-url={{dataUrl}} fields$='{{_getFields(item.value)}}' filters$='{{_getFilters(item.value)}}'></dynamic-datatable-datalet>
                        </neon-animatable>
                    </template>
                </neon-animated-pages>
            </div>

        </div>

    </template>

    <script>

        Polymer({

            is : 'multi-table-controllet',

            properties : {

                selected : {
                    type  : Number,
                    value : undefined
                },

                selectedFields : {
                    type  : Array,
                    value : undefined
                },

                dataUrl : {
                    type  : String,
                    value : undefined
                },

                toSelect : {
                    type  : Number,
                    value : undefined
                }

            },

            listeners: {
                'dom-change': '_onDomChange'
            },

            ready : function() {
                $(this.$.multi_table_tables).perfectScrollbar();
            },

            setSelectedFields : function(selectedFields) {
                this.toSelect = this._calculateSelected(this.selectedFields, selectedFields);
                this.selectedFields = this._copy(selectedFields);
            },

            _calculateSelected : function(preselectedFields, selectedFields) {
                if(!preselectedFields)
                    return 0;//new multi-table
                if(Object.keys(selectedFields).length == 0)
                    return 0;//no fields

                for(var key in selectedFields){
                    if(!preselectedFields[key])
                        return Object.keys(selectedFields).indexOf(key);//new field

                    if(JSON.stringify(selectedFields[key]) != JSON.stringify(preselectedFields[key]))
                        return Object.keys(selectedFields).indexOf(key);//modified field
                }

                //removed field
                if(this.selected == 0){
                    this.selected = 1;
                    return 0;
                }

                /******** optional ********/

                var removedIndex;
                for(var key in preselectedFields){
                    if(!selectedFields[key]){
//                        if(Object.keys(preselectedFields).indexOf(key) != 0)
                            removedIndex = Object.keys(preselectedFields).indexOf(key);//
                    }
                }

                //'select the selected' (index changed after remove)
                if(removedIndex <= this.selected){
                    return this.selected - 1;
                }
                else{
                    this.selected = this.selected + 1;
                    return this.selected -1;
                }
            },

            _copy : function(o) {
                var out, v, key;
                out = Array.isArray(o) ? [] : {};
                for (key in o) {
                    v = o[key];
                    out[key] = (typeof v === "object") ? this._copy(v) : v;
                }
                return out;
            },

            _onDomChange : function(e) {
                if (e.target.id == "dom_pages")
                    this.async(function () {this.selected = this.toSelect;}, 0);
            },

            _toArrayTabs : function(obj) {
                return Object.keys(obj).map(function(key) {
                    return {name: key.replace(/,/g, " / "), value: obj[key]};
                });
            },

            _toArrayPages : function(obj) {
                return Object.keys(obj).map(function(key) {
                    return {name: key, value: obj[key]};
                });
            },

            _getFields : function(value) {
                return value;
            },

            _getFilters : function(value) {
                return JSON.stringify(this.filters);
            }

        });

    </script>

</dom-module>