<dom-module id="ecda-app">

    <link rel="import"
          href="bower_components/iron-icons/iron-icons.html">
    <link rel="import"
          href="bower_components/paper-drawer-panel/paper-drawer-panel.html">
    <link rel="import"
          href="bower_components/paper-header-panel/paper-header-panel.html">
    <link rel="import"
          href="bower_components/paper-icon-button/paper-icon-button.html">
    <link rel="import"
          href="bower_components/paper-item/paper-item.html">
    <link rel="import"
          href="bower_components/paper-menu/paper-menu.html">
    <link rel="import"
          href="bower_components/paper-toolbar/paper-toolbar.html">
    <link rel="import"
          href="bower_components/paper-spinner/paper-spinner.html">

    <link rel="import" type="css" href="stylesheets/ecda.css"/>

    <link rel="import" href="ecda-container.html"/>

    <!---->

    <link rel="import" href="ecda-gadget.html">
    <link rel="import"
          href="bower_components/iron-flex-layout/iron-flex-layout-classes.html">

    <link rel="import" href="bower_components/iron-meta/iron-meta.html">

    <style include="iron-flex iron-flex-alignment"></style>


    <template>

        <paper-dialog id="modal" modal>
            <paper-input value="zpq4@cdc.gov" label="email" id="email">
                <iron-icon icon="mail" prefix></iron-icon>
            </paper-input>
            <paper-input value="Welcome!44" label="password" id="password"
                         type="password">
                <iron-icon icon="card-membership" prefix></iron-icon>
            </paper-input>
            <div class="buttons">
                <paper-button dialog-confirm autofocus on-click="okClick">OK
                </paper-button>
                <paper-button dialog-cancel autofocus>Cancel</paper-button>
            </div>
        </paper-dialog>

        <paper-dialog id="pleasewait">
            <paper-spinner id="pleasewait_sp" active></paper-spinner>
        </paper-dialog>

        <app-location route="{{route}}" use-hash-as-path></app-location>
        <app-route route="{{route}}">
            pattern="/:action"
            data="{{actionData}}"
            tail="{{actionTail}}"
        </app-route>

        <iron-ajax id="logonAjax"
                   on-response="handleLogonResponse"></iron-ajax>
        <iron-ajax id="canvasAjax"
                   on-response="handleCanvasResponse"></iron-ajax>
        <iron-ajax id="canvasListAjax"
                   on-response="handleCanvasListResponse"></iron-ajax>


        <paper-drawer-panel id="mainDrawerPanel" class="main-drawer-panel"
                            main
                            drawer-toggle-attribute="list-toggle">

            <paper-header-panel class="list-panel"
                                on-content-scroll="scrollHandler" drawer>

                <!-- List Toolbar -->
                <paper-toolbar>
                    <paper-icon-button icon="home"
                                       list-toggle></paper-icon-button>
                </paper-toolbar>

                <!-- List -->
                <paper-menu class="list" id="canvasList"
                            on-iron-select="_on_iron_select">
                    <template is="dom-repeat"
                              items="{{canvasListResponseJson.NewDataSet.Table}}">
                        <paper-item>{{item.CanvasName}}</paper-item>
                    </template>
                </paper-menu>

            </paper-header-panel>

            <paper-header-panel class="list-panel"
                                on-content-scroll="scrollHandler" main>

                <!-- Main Toolbar -->
                <paper-toolbar>
                    <paper-icon-button icon="menu"
                                       list-toggle></paper-icon-button>
                    <paper-icon-button icon="save"
                                       on-click="_on_test_click"></paper-icon-button>
                </paper-toolbar>

                <!-- Main Content -->
                <div class="content">

                    <!-- <ecda-container id="ecda_cont"
                                     gadgets-collection="{{canvasResponseJson }}">
                     </ecda-container>-->

                    <div>
                        <paper-material>
                            <p>Canvas Name:
                                {{canvasResponseJson.DashboardCanvas.CanvasName}} </p>
                            <p>Datasource Name:
                                {{canvasResponseJson.DashboardCanvas.DatasourceName
                                }}</p>
                            <!-- <paper-button on-click="_on_test_click">AA
                             </paper-button>-->
                        </paper-material>
                    </div>

                    <div class="layout horizontal wrap" id="xx1">
                        <template is="dom-repeat" id="ecdaContTemplate"
                                  items="{{canvasResponseJson.DashboardCanvas.Gadgets.gadget  }}">
                            <ecda-gadget id="gadget{{index }}"
                                         canvas-json="{{item }}"></ecda-gadget>
                        </template>
                    </div>


                </div>

            </paper-header-panel>

        </paper-drawer-panel>

    </template>

    <script>

        Polymer({
            is: 'ecda-app',
            properties: {
                canvasResponseJson: {
                    type: Object,
                    notify: true

                },
                canvasListResponseJson: {
                    type: Object,
                    notify: true
                },
                canvasSelectedJson: {
                    type: Object
                },
                selectedCanvas: {
                    type: Number,
                    notify: true
                }
            },
            ready: function () {

                var dialog = document.getElementById("modal");
                if (dialog) {
                    dialog.open();
                }

            },
            okClick: function () {
                this._logonUser();
            },
            _logonUser: function () {
                var user = this.$.email.value;
                var password = this.$.password.value;
                var canvasid = tempConstants.canvasid;

                var jsonRequest = {
                    id: user,
                    password: password,
                    canvasid: canvasid
                };


                logThis('ready from app  ');

                this.$.pleasewait.open();
                // this.$.pleasewait.active = true;

                tryAjax(this.$.logonAjax, "Login", jsonRequest);

                // git test -- tag1

            },
            _computeListWidth: function (isMobile) {
                // when in mobile screen size, make the list be 100% width to cover the whole screen
                return isMobile ? '100%' : '33%';
            },
            _on_test_click: function (e) {
                /*   //   if ( Polymer.dom(ecdaContTemplate.gadget0 )    )
                logThis(this.canvasResponseJson.DashboardCanvas.Gadgets.gadget.length)
                logThis("this.$$(gadget0  )  " + this.$$('#gadget0').canvasJson);
                walk(this.$$('#gadget0').canvasJson, "this.$$( '#gadget0'  ).canvasJson ")
                //  logThis("aa " + Polymer.dom(this.$$(gadget0  )  )  )        ;

                //  walk(Polymer.dom(ecdaContTemplate.gadget0 ), "Polymer.dom(ecdaContTemplate.gadget0 ) "  )        ;
                 //  walk( this.$$("ecdaContTemplate"  )    , "Polymer.dom(ecdaContTemplate.gadget0 ) "  )        ;*/

                logThis(this.canvasResponseJson.DashboardCanvas.Gadgets.gadget.length)

                for (x = 0; x < this.canvasResponseJson.DashboardCanvas.Gadgets.gadget.length; x++) {
                    logThis(this.$$('#gadget' + x).canvasJson.top);
                }

            },
            _on_iron_select: function (e) {

                this.$.mainDrawerPanel.closeDrawer();
                this.$.pleasewait.open();
                //  this.$.pleasewait.active = true;


                //  logThis( this.$.canvasList.selectedItem.textContent ,  "_selected"  )        ;
                logThis(this.$.canvasList.selected, "_selected");

                // Get selected  ihdex
                this.selectedCanvas = this.$.canvasList.selected;

                this.canvasSelectedJson = this.canvasListResponseJson[this.selectedCanvas];

                 logThis(this.canvasListResponseJson.NewDataSet.Table[this.selectedCanvas].CanvasGUID  )        ;

                var req = {
                    canvasid: this.canvasListResponseJson.NewDataSet.Table[this.selectedCanvas].CanvasGUID
                }

                logThis(req.canvasid, "req.canvasid");

                tryAjax(this.$.canvasAjax, "Canvas", req);

            },
            handleCanvasListResponse: function (response) {

                this.$.pleasewait.close();
                // this.$.pleasewait.active = false;

                this.canvasListResponseJson = JSON.parse(response.detail.xhr.responseText);

                walk(this.canvasListResponseJson, "canvasListResponseJson");
            },

            handleCanvasResponse: function (response) {
                logThis("handleCanvasResponse");






                logThis( Polymer.dom(ecdaContTemplate  ).children.length  )        ;
                      //  Polymer.dom(ecdaContTemplate  ).children.clear        ;

                      logThis( Polymer.dom(ecdaContTemplate  ).children.length  )        ;


                this.$.pleasewait.close();
                // this.$.pleasewait.active = false;

                var responseCheck = JSON.parse(response.detail.xhr.responseText);

                if (Array.isArray(responseCheck.DashboardCanvas.Gadgets.gadget) == false) {

                    var oneGadget = responseCheck.DashboardCanvas.Gadgets.gadget;
                    oneGadget = [oneGadget];
                    responseCheck.DashboardCanvas.Gadgets.gadget = null;
                    responseCheck.DashboardCanvas.Gadgets.gadget = oneGadget;

                    logThis("one item array" + " -- " + responseCheck.DashboardCanvas.Gadgets.gadget.length);
                }
                this.canvasResponseJson = responseCheck;
            },
            handleLogonResponse: function (e, responseX) {

                this.$.pleasewait.close();

                logThis(e.detail.xhr.responseText);

                var responseJson = JSON.parse(e.detail.xhr.responseText);

                if (gUserJson) {

                    gUserJson.User = responseJson;
                    console.log('cont gUserJson ---->  ' + gUserJson.User);

                    walk(gUserJson, "gUserJson");

                }

                //======================
                var UserID = gUserJson.User.UserID;

                var jsonUser = {
                    id: UserID
                };


                tryAjax(this.$.canvasListAjax, "CanvasList", jsonUser);

                logThis(this.$.canvasListAjax.body);
            },
            scrollHandler: function (event) {
                var scroller = event.detail.target;
                logThis(scroller.scrollTop);
            }
        });
    </script>

</dom-module>