<!--
@license
Copyright (c) 2016 The Polymer Project Authors. All rights reserved.
This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
Code distributed by Google as part of the polymer project is also
subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
-->

<link rel="import" href="../bower_components/polymer/polymer.html">
<link rel="import" href="../bower_components/app-layout/app-drawer/app-drawer.html">
<link rel="import" href="../bower_components/app-layout/app-drawer-layout/app-drawer-layout.html">
<link rel="import" href="../bower_components/app-layout/app-header/app-header.html">
<link rel="import" href="../bower_components/app-layout/app-header-layout/app-header-layout.html">
<link rel="import" href="../bower_components/app-layout/app-scroll-effects/app-scroll-effects.html">
<link rel="import" href="../bower_components/app-layout/app-toolbar/app-toolbar.html">
<link rel="import" href="../bower_components/app-route/app-location.html">
<link rel="import" href="../bower_components/app-route/app-route.html">
<link rel="import" href="../bower_components/iron-pages/iron-pages.html">
<link rel="import" href="../bower_components/iron-selector/iron-selector.html">
<link rel="import" href="../bower_components/paper-icon-button/paper-icon-button.html">
<link rel="import" href="../bower_components/paper-toast/paper-toast.html">
<link rel="import" href="../bower_components/paper-button/paper-button.html">
<link rel="import" href="shared-icons.html">

<link rel="import" href="shared-styles.html">

<dom-module id="hedgehog-app">
    <template>
        <style include="shared-styles">
     /* :host {
        --app-primary-color: #4285f4;
        --app-secondary-color: black;

        display: block;
      }

      app-header {
        color: #fff;
        background-color: var(--app-primary-color);
      }
      app-header paper-icon-button {
        --paper-icon-button-ink-color: white;
      }

      .drawer-list {
        margin: 0 20px;
      }

      .drawer-list a {
        display: block;
        padding: 0 16px;
        text-decoration: none;
        color: var(--app-secondary-color);
        line-height: 40px;
      }

      .drawer-list a.iron-selected {
        color: black;
        font-weight: bold;
      }*/


        </style>

        <app-location route="{{route}}" use-hash-as-path></app-location>
        <app-route
                route="{{route}}"
                pattern="/:page"
                data="{{routeData}}"
                tail="{{subroute}}"></app-route>

        <app-drawer-layout fullbleed>
            <!-- Drawer content -->
            <app-drawer id="drawer">
                <app-toolbar>Menu</app-toolbar>
                <iron-selector selected="[[page]]" attr-for-selected="name" class="drawer-list" role="navigation">
                    <a name="dashboard-view" href="#/dashboard-view">Műszerfal</a>
                    <a name="device-view" href="#/device-view">Eszközök</a>
                    <a name="measurement-journal-view" href="#/measurement-journal-view">Mérések</a>
                    <a name="visaconsole-view" href="#/visaconsole-view">Visa</a>
                </iron-selector>
            </app-drawer>

            <!-- Main content -->
            <app-header-layout has-scrolling-region>

                <app-header condenses reveals effects="waterfall">
                    <app-toolbar>
                        <paper-icon-button icon="shared-icons:menu" drawer-toggle></paper-icon-button>
                        <div main-title>My App</div>
                    </app-toolbar>
                </app-header>

                <iron-pages
                        selected="[[page]]"
                        attr-for-selected="name"
                        fallback-selection="view404"
                        role="main">
                    <hedgehog-dashboard-view name="dashboard-view" route="{{subroute}}"
                                             headers="{{headers}}"></hedgehog-dashboard-view>
                    <hedgehog-device-view name="device-view" route="{{subroute}}"
                                          headers="{{headers}}"></hedgehog-device-view>
                    <hedgehog-devicedetails-view name="devicedetails-view" route="{{subroute}}"
                                                 headers="{{headers}}"></hedgehog-devicedetails-view>
                    <hedgehog-measurement-journal-view name="measurement-journal-view" route="{{subroute}}"
                                                       headers="{{headers}}"></hedgehog-measurement-journal-view>
                    <hedgehog-visaconsole-view name="visaconsole-view" route="{{subroute}}"
                                               headers="{{headers}}"></hedgehog-visaconsole-view>
                    <hedgehog-view404 name="view404"></hedgehog-view404>
                </iron-pages>


            </app-header-layout>

            <paper-toast id="mainToast" duration="0" class$="[[feedbackLevel]]">
                <paper-button on-tap="_onCloseToast" raised>OK</paper-button>
            </paper-toast>

        </app-drawer-layout>
    </template>

    <script>
    Polymer({
      is: 'hedgehog-app',

      properties: {
        page: {
          type: String,
          reflectToAttribute: true,
          observer: '_pageChanged',
        },
      },

      listeners: {
        'plutonum-navigate': '_onNavigate',
        'plutonium-notification': '_onNotification',
      },

      observers: [
        '_routePageChanged(routeData.page)',
      ],

      _routePageChanged: function(page) {
        this.page = page || 'view1';

        if (!this.$.drawer.persistent) {
          this.$.drawer.close();
        }
      },

      _pageChanged: function(page) {
        // Load page import on demand. Show 404 page if fails
        var resolvedPageUrl = this.resolveUrl('hedgehog-' + page + '.html');
        this.importHref(resolvedPageUrl, null, this._showPage404, true);
      },

      _showPage404: function() {
        this.page = 'view404';
      },

      _onNavigate: function(event, details) {
        this.set('route.path', details.page);
        this.set('routeData.id', details.id);
      },
      _onNotification: function(event, details) {
        this.$.mainToast.text = details.message;
        this.feedbackLevel = details.level;
        console.log((this.id ? this.is + '#' + this.id : this.is), 'notify', details);
        this.$.mainToast.open();
      },
      _onCloseToast: function () {
        this.$.mainToast.close();
      }
    });


    </script>
</dom-module>
