/********************************************************************************************************************************
<!--<script src="../shared_js/jquery-1.11.2.min.js"></script>-->
<!--<script src="../../bower_components/webcomponentsjs/webcomponents-lite.min.js"></script>-->
<script src="../shared_js/perfect-scrollbar/js/min/perfect-scrollbar.jquery.min.js"></script>
<link rel="stylesheet" href="../shared_js/perfect-scrollbar/css/perfect-scrollbar.min.css">

<script defer src="../../bower_components/l20n/dist/compat/web/l20n.min.js"></script>
/********************************************************************************************************************************

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

<link rel="import" href="../page-slider-controllet/page-slider-controllet.html">
<link rel="import" href="../dataset-selection-controllet/dataset-selection-controllet.html">
<link rel="import" href="../tree-view-multi-table-controllet/tree-view-multi-table-controllet.html" />
<link rel="import" href="../datalet-selection-controllet/datalet-selection-controllet.html">

<dom-module id="data-sevc-controllet">

    <template>

        <page-slider-controllet id="slider">

            <neon-animatable>

                <template is="dom-if" if={{!modify}}>
                    <dataset-selection-controllet id="dataset_selection" datasets={{datasets}} suggested-datasets={{suggestedDatasets}}></dataset-selection-controllet>
                </template>

            </neon-animatable>

            <neon-animatable>

                <tree-view-multi-table-controllet id="tree_view_multi_table" data-url={{dataUrl}} preselected-fields={{selectedFields}}></tree-view-multi-table-controllet>

            </neon-animatable>

            <neon-animatable>

                <datalet-selection-controllet id="datalet_selection" deep-url={{deepUrl}} datalets-list-url={{dataletsListUrl}} data-url={{dataUrl}} preselected-datalet={{selectedDatalet}} datalet-preset={{dataletPreset}}></datalet-selection-controllet>

            </neon-animatable>

        </page-slider-controllet>

    </template>

    <script>

        Polymer({

            is : 'data-sevc-controllet',

            listeners : {
                'page-slider-controllet_selected' : '_updateSlider',
                'dataset-selection-controllet_data-url' : '_allowSecondStep',
                'tree-view-controllet_selected-fields' : '_allowThirdStep'
            },

            properties : {

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

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

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

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

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

                jsonData : {
                    type  : Object,
                    value : undefined
                },

                modify : {
                    type  : Boolean,
                    value : false
                },

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

                selectedFields : {
                    type  : Array,
                    value : []
                },

                dataletPreset : {
                    type  : Object,
                    value : []
                }

            },

            ready : function(){
                if(this.selectedDatalet){
                    this.modify = true;
                    this.$.slider.selected = 1;
//                    console.log(this.selectedDatalet);
                    this.dataUrl = this.dataletPreset["data-url"];
                }

            },

            _updateSlider : function(e){
                switch (e.detail.selected) {
                    case 0:
                        document.l10n.formatValues('slide1Title', 'slide1Subtitle').then(A => slider.setTitle(A[0], A[1]));
//                        slider.setTitle("SELECT DATASET", "Search or copy and paste the url of dataset.");
                        slider.chevronLeft("invisible");
                        slider.chevronRight(false);
                        if(slider.getPrevSelected() == 1)
                            slider.chevronRight(true);
                        break;
                    case 1:
                        document.l10n.formatValues('slide2Title', 'slide2Subtitle').then(A => slider.setTitle(A[0], A[1]));
//                        slider.setTitle("SELECT DATA", "Select the fields from tree-view. The multi-table will show the values related to the selected fields.");
                        if(this.modify){
                            slider.chevronLeft("invisible");
                            slider.setAvatar("2");
                        }
                        else{
                            slider.chevronLeft(true);
                        }
                        slider.chevronRight(false);
                        this.$.tree_view_multi_table.ready();
                        this._allowThirdStep({detail: {fields: tree_view_multi_table.getFlatFields()}});
                        break;
                    case 2:
                        document.l10n.formatValues('slide3Title', 'slide3Subtitle').then(A => slider.setTitle(A[0], A[1]));
//                        slider.setTitle("SELECT VISUALIZATION", "Select a visualization, fill out inputs and labels (optional).");
                        slider.chevronLeft(true);
                        slider.chevronRight("invisible");
                        this.$.datalet_selection.setFields(tree_view_multi_table.getFlatFields());
                        this.$.datalet_selection.ready();
                }
            },

            _allowSecondStep : function(e){
                this.dataUrl = e.detail.url;

                $.ajax({
                    url: e.detail.url,
                    dataType: "json",
                    success: function(data){
//                        this.dataUrl = e.detail.url
//                        this.jsonData = JSON.stringify(data);
                        slider.chevronRight(true);
                    },
                    error: function(){
//                        this.jsonData = undefined;
                        slider.chevronRight(false);
                    }
                });

                this.$.datalet_selection.reset();
            },

            _allowThirdStep : function(e){
                if(e.detail.fields.length > 0)
                    slider.chevronRight(true);
                else
                    slider.chevronRight(false);
            }

        });

    </script>

</dom-module>