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

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

<link rel="import" href="../../bower_components/paper-dropdown-menu/paper-dropdown-menu.html">
<link rel="import" href="../../bower_components/paper-menu/paper-menu.html">
<link rel="import" href="../../bower_components/paper-item/paper-item.html">

<link rel="import" href="../../bower_components/paper-icon-button/paper-icon-button.html">
<link rel="import" href="../../bower_components/iron-icons/iron-icons.html">
<link rel="import" href="../../bower_components/iron-icon/iron-icon.html">

<link rel="import" href="../../bower_components/paper-input/paper-textarea.html">

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

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

<link rel="import" href="../items-vslider-controllet/items-vslider-controllet.html" />

<script src="../../../DEEPCLIENT/js/deepClient.js"></script>

<dom-module id="datalet-selection-controllet">

    <template>

        <style is="custom-style">
            :host {
            --paper-dropdown-menu-icon: {
                 color: #2196F3;
             };
            }

            #datalet_selection_container {
                display: flex;
                font-family: 'Roboto', 'Helvetica Neue', Helvetica, Arial, sans-serif;
                font-size: 16px;
                margin-top: 8px;
            }

            #datalet_selection_inputs {
                position: relative;
                height: 100vh;
                margin-left: 32px;
                /*width: 344px;*/
                min-width: 258px;
            }

            #datalet_selection_labels {
                position: relative;
                height: 100vh;
                margin-left: 32px;
                /*width: 344px;*/
                min-width: 258px;
            }

            #datalet_selection_column {
                position: relative;
                width: 100%;
                margin-left: 32px;
            }

            #datalet_selection_datalet {
                position: relative;
                height: 100vh;
                width: 100%;
                /*margin-left: 32px;*/
                /*margin-top: 32px;*/
                /*margin-bottom: 32px;*/
            }

            #datalet_selection_comment{
                width: 100%;
                /*height: 112px;*/
                margin-bottom: 32px;
            }

            #datalet_selection_datalet_placeholder {
                padding: 16px;
            }

            .inputs{
                position: relative;
                /*margin-left: 16px;*/
                /*margin-right: 16px;*/
            }

            /*.input_name{*/
                /*height: 16px;*/
                /*padding: 16px;*/
                /*/!*background-color: #B6B6B6;*!/*/

                /*background-color: #2196F3;*/
                /*color: #FFFFFF;*/
                /*font-weight: 700;*/
            /*}*/

            .input_header{
                height: 32px;
                padding-top: 16px;
                /*padding: 16px;*/
                background-color: #B6B6B6;
                text-align: center;
                font-weight: 700;
            }

            .info_button {
                /*background-color: red;*/
                position: absolute;
                top: 18px;
                right: 0px;
            }

            paper-textarea {
                display: inline-block;
                height: 48px;
                /*padding: 0px 8px;*/
                width: 210px;
                padding-left: 8px;
                padding-bottom: 8px;
                --paper-input-container-focus-color: #2196F3;
            }

            #datalet_selection_comment paper-textarea {
                padding-bottom: 0px;
                width: calc(100% - 16px);
            }

            paper-dropdown-menu {
                /*display: inline-block;*/
                height: 48px;
                width: 210px;;
                /*padding: 0px 8px;*/
                padding-left: 8px;
                padding-bottom: 8px;
                --paper-input-container-focus-color: #2196F3;
            }

            paper-item.iron-selected {
                background-color: #2196F3;
                color: #FFFFFF;
            }

            paper-icon-button {
                /*display: inline-block;*/
                color: #2196F3;
                /*color: #FFFFFF;*/
                --paper-icon-button-ink-color: #2196F3;
                margin: 0px;
                /*padding: 0px;*/
            }

            paper-button {
                /*display: block;*/
                position: absolute;
                bottom: 16px;
                right: 11px;

                height: 48px;
                width: 172px;
                background-color: #00BCD4;
                color: white;
                font-weight: 700;
                padding: 16px;
            }

            paper-button:hover {
                background-color: #00AABF;
            }

            paper-button[disabled] {
                background-color: #B6B6B6;
            }

            #dialog_info_input {
                border: 2px solid #2196F3;
                background-color: #E0E0E0;
                min-width: 256px;
            }
        </style>

        <iron-ajax id="selectedDatalet_request" on-response="_handleSelectedDatalet"></iron-ajax>

        <div id="datalet_selection_container">
            <items-vslider-controllet id="vslider" datalets-list-url={{dataletsListUrl}} preselected-datalet={{preselectedDatalet}}></items-vslider-controllet>


            <paper-material id="datalet_selection_inputs" elevation="5">
                <div class="input_header"><span data-l10n-id="inputs"></span></div>
                <template is="dom-repeat" items="{{inputs}}" index-as="ddl_index">
                    <div class="inputs">
                        <paper-dropdown-menu id={{ddl_index}} label={{item.name}}>
                            <paper-menu class="dropdown-content">
                                <template is="dom-repeat" items={{fields}}>
                                    <paper-item id={{index}} on-tap="_addInput">{{item}}</paper-item>
                                </template>
                            </paper-menu>
                        </paper-dropdown-menu>
                        <div class="info_button">
                            <paper-icon-button id="info_button" on-click="_showInfo" icon="info-outline" title="{{item.name}} info"></paper-icon-button>
                        </div>
                    </div>
                </template>
            </paper-material>

            <paper-material id="datalet_selection_labels" elevation="5">
                <div class="input_header"><span data-l10n-id="labels"></span></div>
                <template is="dom-repeat" items="{{labels}}" index-as="index">
                    <div class="inputs">
                        <paper-textarea label={{item.name}}></paper-textarea>
                        <div class="info_button">
                            <paper-icon-button id="info_button" on-click="_showInfo" icon="info-outline" title="{{item.name}} info"></paper-icon-button>
                        </div>
                    </div>
                </template>
            </paper-material>


            <div id="datalet_selection_column">

                <!--<template is="dom-if" if={{modify}}>-->
                    <paper-material id="datalet_selection_comment" elevation="5">
                        <div class="input_header"><span data-l10n-id="comment"></span></div>
                        <paper-textarea id="comment" no-label-float maxlength="100" label="comment (max 100 characters)"></paper-textarea>
                    </paper-material>
                <!--</template>-->

                <paper-material id="datalet_selection_datalet" elevation="5">
                    <div class="input_header"><span data-l10n-id="dataletPreview"></span></div>
                    <div id="datalet_selection_datalet_placeholder"></div>

                </paper-material>

                <paper-button id="add_button" disabled raised on-click="_addDatalet"><span data-l10n-id="addDatalet"></span></paper-button>

            </div>

            <paper-dialog id="dialog_info_input">
                <h2 id="dialog_name"></h2>
                <p id="dialog_description"></p>
            </paper-dialog>

        </div>

    </template>

    <script>

        Polymer({

            is : 'datalet-selection-controllet',

            properties : {

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

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

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

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

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

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

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

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

//                selectableFields : {
//                    type : Array,
//                    value : []
//                },

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

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

                modify : {
                    type  : Boolean,
                    value : false
                }

            },

            listeners: {
                'items-vslider-controllet_selected-datalet': '_selectDatalet'
//                'tree-view-controllet_selected-fields': '_updateSelectedFields'
            },

            ready : function() {
                this._resize();
                $(this.$.datalet_selection_inputs).perfectScrollbar();
                $(this.$.datalet_selection_labels).perfectScrollbar();
                $(this.$.datalet_selection_datalet).perfectScrollbar();

                this.params = {'data-url' : this.dataUrl};

                //this.modify = true;//da eliminare in futuro
                if(this.preselectedDatalet){
                    this.modify = true;
                    this._preselectDatalet();
                    this.preselectedDatalet = undefined;
                }
            },

            attached : function() {
                this._resize();
                var that = this;
                window.addEventListener("resize", function() { that._resize(); });

//                var inputs = document.getElementsByTagName("paper-dropdown-menu");
//                console.log(inputs);
//                for(var i in inputs)
//                    console.log(i);
//                for(var i=0; i < inputs.length; i++)
//                    console.log($(inputs[i]).children("paper-menu"));

                this._translate();
            },

            _translate : function(){
                document.l10n.formatValue('commentLabel').then(s => $("#comment")[0].setAttribute("label", s));
                if(this.modify)
                    document.l10n.formatValue('modifyDatalet').then(s => this.$.add_button.innerText = s);
            },

            setFields : function(fields) {
                this.fields = fields;
            },

            reset : function() {
                this.selectedDatalet = undefined;
                this.inputs = [];
                this.labels = [];
                this.$.datalet_selection_datalet_placeholder.innerHTML = "";
            },

            _selectDatalet : function(e){
                this.$.add_button.setAttribute("disabled", "true");

                this.selectedDatalet = e.detail.datalet;
                this.inputs = [];
                this.labels = [];

                if(this.selectedDatalet){
                    this.$.selectedDatalet_request.url = this.deepUrl + e.detail.datalet + "-datalet";
                    this.$.selectedDatalet_request.generateRequest();
                }
//                else {
//                    this.inputs = [];
//                    this.labels = [];
//                }

//                this.$.datalet_selection_datalet_placeholder.innerHTML = "";
//                this.selectedFields = [];
            },

            _preselectDatalet : function() {
                this.selectedDatalet = this.preselectedDatalet;
                this.selectedFields = this._copy(this.fields);

                var inputs = document.getElementsByTagName("paper-dropdown-menu");
                for(var i=0; i < inputs.length; i++)
                    $(inputs[i]).find("paper-menu")[0].select(i);

                this._loadDatalet(this.selectedFields);
            },

            _handleSelectedDatalet : function(e){
                this.$.datalet_selection_datalet_placeholder.innerHTML = "";

                var inputs = e.detail.response.idm.inputs.input;
                var labels = e.detail.response.idm.inputs.layouts.input;

                if(inputs.constructor == Object) {//not Array && inputs.input.selection == "*"
                    var name = inputs.name;
                    var description = inputs.description;
                    var selection = inputs.selection;
                    inputs = [];
                    for(var i in this.fields)
                        inputs.push({name: name + " " + i, description: description, selection: selection});
                }

                this.inputs = inputs;
                this.labels = labels;

//                if(this.inputs[0].selection == "*")
//                    this.selectedFields = [];
//                else
                    this.selectedFields = new Array(inputs.length);
            },

            _addInput : function(e){
                var selectedFields = this._copy(this.selectedFields);

                var index = $(e.target).parents("paper-dropdown-menu")[0].id;
                selectedFields[index] = e.target.innerHTML.trim();

                this.selectedFields = this._copy(selectedFields);

                var load = true;

                if(this.inputs[0].selection == "*"){
                    var temp = [];
                    for (var i = 0; i < selectedFields.length; i++)
                        if(selectedFields[i])
                           temp.push(selectedFields[i]);
                    selectedFields = temp;
                }
                else {
                    for (var i = 0; i < selectedFields.length; i++)
                        if (!selectedFields[i]) {
                            load = false;
                            break;
                        }
                }

                if(load){
//                    var labels = this.$.datalet_selection_labels.querySelectorAll("paper-textarea");
//                    for (var i = 0; i < labels.length; i++) {
//                        if (labels[i].innerHTML.trim() != "") {
//                            this.params[labels[i].label] = labels[i].value;
//                        }
//                    }
                    
                    this._loadDatalet(selectedFields);
                }

            },

            _loadDatalet : function(selectedFields){
//                var params = {'data-url' : this.dataUrl};

                var labels = this.$.datalet_selection_labels.querySelectorAll("paper-textarea");
                for (var i = 0; i < labels.length; i++) {
                    if (labels[i].innerHTML.trim() != "") {
                        this.params[labels[i].label] = labels[i].value;
                    }
                }

                console.log(this.selectedDatalet);
                console.log(this.params);
                console.log(selectedFields);
                console.log(this.dataUrl);

                var dataletParams ={
                    component   : this.selectedDatalet+"-datalet",
                    params      : this.params,
                    fields      : selectedFields,
                    placeHolder : this.$.datalet_selection_datalet_placeholder
                };

                ComponentService.deep_url = this.deepUrl;
                ComponentService.getComponent(dataletParams);

                this.async(function(){this.$.add_button.removeAttribute("disabled");}, 1111);
            },

            _addDatalet : function(){

                var selectedFields = [];
                for (var i = 0; i < this.selectedFields.length; i++)
                    if(this.selectedFields[i])
                        selectedFields.push(this.selectedFields[i]);

                var data = {
                    dataUrl : this.dataUrl,
                    params :  this.params,
//                    params :  {'data-url' : this.dataUrl},
                    fields :  selectedFields,
                    datalet : this.selectedDatalet+"-datalet",
                    comment : this.$.comment.value,
                    staticData : JSON.stringify(this.$.datalet_selection_datalet_placeholder.children[1].behavior.data)
                }

                this.fire('data-sevc-controllet.dataletCreated', {data : data});

            },

            _showInfo : function(e){
                var t = e.target;
                if(t.tagName.indexOf("IRON-ICON") != -1)
                    t = $(e.target).parents("paper-icon-button")[0];

                var name = t.getAttribute("title").replace(" info", "");

                var dataset = $.grep(this.inputs, function(e){ return e.name == name; })[0];
                if(!dataset)
                    dataset = $.grep(this.labels, function(e){ return e.name == name; })[0];

                this.$.dialog_name.innerHTML = dataset.name;
//                this.$.dialog_description.innerHTML = dataset.description;
                document.l10n.formatValue(dataset.description).then(s => this.$.dialog_description.innerHTML = s);
                this.$.dialog_info_input.open();

                var pos = t.getBoundingClientRect();
                $("#dialog_info_input").css("top", pos.top - 4);
                $("#dialog_info_input").css("left", pos.left - 4);
            },

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

            _resize : function(){
                var h = Math.max(document.documentElement.clientHeight, window.innerHeight || 0) - 16;
                h = h - 64 - 8; //height with page scroller

                $("#items_vslider_container").height(h);//vslider controllet

                $("#datalet_selection_inputs").height(h);
                $("#datalet_selection_labels").height(h);
//                if(this.modify)
                    $("#datalet_selection_datalet").height(h-128);
//                else
//                    $("#datalet_selection_datalet").height(h);
            }

        });

    </script>

</dom-module>