/*
* Copyright (c) 2021 Xilinx, Inc.
* 
* Permission is hereby granted, free of charge, to any person obtaining a copy of this software and 
* associated documentation files (the "Software"), to deal in the Software without restriction, including 
* without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 
* copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to 
* the following conditions: 
* 
* The above copyright notice and this permission notice shall be included in all copies or substantial 
* portions of the Software. 
* 
* THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT 
* LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. 
* IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, 
* WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE 
* SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
* 
*
*
*/
import { PolymerElement, html } from "../../node_modules/@polymer/polymer/polymer-element.js";
import "../../node_modules/@vaadin/vaadin-lumo-styles/icons.js";
import "../../node_modules/@vaadin/vaadin-tabs/vaadin-tabs.js";
import { filePath } from './path.js';

class CutomTab extends PolymerElement {
  static get template() {
    return html`
      <style include="shared-styles">
        :host {
          display: block;
        }
      </style>
      <div class="">
      <vaadin-tabs selected="{{page}}">
        <template is="dom-repeat" items="{{lists}}" as="list">
          <template is="dom-if" if={{list.permission}}>
            <vaadin-tab>
              <span>{{list.displayname}}</span>
            </vaadin-tab>
          </template>
        </template>
      </vaadin-tabs>
      <iron-pages selected="[[page]]">
      </iron-pages>
      </div>
    `;
  }

  static get properties() {
    return {
      page: {
        type: String,
        reflectToAttribute: true,
        observer: '_pageChanged'
      },
      lists: {
        type: Array,
        value: this.lists,
        observer: '_listObserver'
      }
    };
  }

  _pageChanged(page) {
    if (this.lists.length > 0) {
      this._listUpdated(this.lists[page]);
    }
  }

  _listObserver(lists) {
    const pkey = this.getAttribute('key');

    if (lists) {
      let ironPage = this.shadowRoot.querySelector("iron-pages");
      ironPage.innerHTML = '';
      lists.forEach(element => {
        if (element.permission || element.permission === 'y') {
          const tag = element.key.replace(/_/g, "-");
          const routePage = document.createElement(tag);
          routePage.setAttribute('displayname', element.displayname);
          routePage.setAttribute('pkey', pkey);
          ironPage.appendChild(routePage);
        }
      });

      this._listUpdated(lists[this.page]);
    }
  }

  _listUpdated(element) {
    if (element && element.key && (element.permission || element.permission === 'y')) {
      const p = filePath[element.key];
      import(`${p}${element.key}.js`);
    }
  }

  ready() {
    super.ready();
  }

}

window.customElements.define('custom-tab', CutomTab);