/*
* 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 "../../shared/datatable-imports.js";
import { handlePaging } from "../../shared/shared-script.js";
import { xsdbhelp } from "../../shared/constants.js";

class xsdbHelpTable extends PolymerElement {
  static get properties() {
    return {
      pageIndex: {
        type: Number,
        value: 0
      },
      pageSize: {
        type: Number,
        value: 5
      },
      sorted: {
        type: String,
        value: 'name'
      },
      sortDirection: {
        type: String,
        value: 'ASC'
      },
      rawItems: {
        type: Array,
        value: []
      },
      filterValue: {
        type: String,
        value: ''
      },
      isSearch: {
        type: Boolean,
        value: false
      },
      placeHolder: {
        type: String,
        value: 'Search Module,Register or address'
      }
    };
  }

  static get template() {
    return html`<style>
            :host {
              display: block;
            }
            paper-card {
              display: block;
              width: 100%;
              margin: auto;
              --paper-card-background-color: white;
            }
            h2 span,
            .buttons {
              width: 100%;
              margin: 20px auto;
            }
            exmg-paper-toolbar .flex {
              @apply --layout-flex;
            }
            iron-input {
              width: 100%;
            }
            input {
              font-size: 14px;
              margin: 0px 4px;
              padding: 4px;
              border: 0px solid var(--divider-color);
              width: 100%;
            }
            exmg-paper-toolbar span.interactive-content {
              margin-left: 10px;
              white-space: nowrap;
              overflow: hidden;
              color: rgba(0,0,0,0.38);
              font-size: 14px;
              text-overflow: ellipsis;
              letter-spacing: .005em;
              box-sizing: border-box;
              font-weight: 400;
              cursor: pointer;
              width: 100%;
            }
            .search {
              background: #fff;
              box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14),
                  0 1px 5px 0 rgba(0, 0, 0, 0.12),
                  0 3px 1px -2px rgba(0, 0, 0, 0.2);
            }
            .search input {
              outline: none;
            }
          </style>

          <h2>XSDB Help</h2>

          <paper-card elevation="1">
          <!-- Table Toobar -->
          <exmg-paper-toolbar>
            <div slot="default" class$="[[_computeSearchClasses(isSearch)]]">
              <template is="dom-if" if="[[isSearch]]" restamp="true">
                <iron-icon icon="exmg-paper-icons:search"></iron-icon>
                <iron-input bind-value="{{filterValue}}">
                  <input id="searchInput" placeholder="[[placeHolder]]" on-keyup="_handleKeyUp" on-blur="_handleInputBlur">
                </iron-input>
              </template>
              <template is="dom-if" if="[[!isSearch]]" restamp="true">
                <iron-icon icon="exmg-paper-icons:search"></iron-icon>
                <span class="interactive-content" on-tap="_showSearch">[[_getFilterValue(filterValue)]]</span>
              </template>
            </div>
          </exmg-paper-toolbar>
            <!-- DataTable -->
            <exmg-paper-datatable>
              <!-- THead -->
              <exmg-paper-thead sorted="{{sorted}}" sort-direction="{{sortDirection}}">
                <template>
                  <div class="tr">
                    <div title="Module" class="th flex-none" sortable="category" style="width:20%">
                      <span>Category</span></div>
                    <div title="Register" class="th flex-none" sortable="command" style="width:20%">
                      <span>Command</span></div>
                    <div title="Address" class="th flex-none" sortable="description" style="width:60%">
                      <span>Description</span></div>
                  </div>
                </template>
              </exmg-paper-thead>
              <!-- TBody -->
              <exmg-paper-tbody items="[[items]]" selection-enabled="" multi-selection="" selected-items="{{selectedItems}}">
                <template>
                  <div class="tr">
                    <div class="td flex-none" style="width:20%">
                      <span title="[[item.category]]">[[item.category]]</span>
                    </div>
                    <div class="td flex-none" style="width:20%">
                      <span title="[[item.command]]">[[item.command]]</span>
                    </div>
                    <div class="td flex-none" style="width:60%;height: auto;padding-top: .5em;padding-bottom: .5em;">
                      <span style="white-space: normal;" title="[[item.description]]">[[item.description]]</span>
                    </div>
                  </div>
                </template>
              </exmg-paper-tbody>
            </exmg-paper-datatable>
            <!-- Table Paging -->
            <exmg-paper-paging total-items={{totalItems}} page-index="{{pageIndex}}" page-size="{{pageSize}}"></exmg-paper-paging>
          </paper-card>
          <!-- Filter items by filter value and return resulting items to the data provider  -->
          <exmg-paper-data-filter raw-items="[[rawItems]]" items="{{filteredItems}}" filter-value="[[filterValue]]" filter-fields="catergory,command"></exmg-paper-data-filter>
          <!-- Manage sorting and paging  -->
          <exmg-paper-data-helper raw-items="[[filteredItems]]" items="{{items}}" page-index="[[pageIndex]]" page-size="[[pageSize]]" sorted="[[sorted]]" sort-direction="[[sortDirection]]" total-items={{totalItems}}></exmg-paper-data-helper>
        `;
  }

  _stopTap(e) {
    // Do something
    e.stopPropagation();
  }

  _getFilterValue(filterValue) {
    return filterValue || this.placeHolder;
  }

  _handleKeyUp(e) {
    if (e.keyCode === 27) {
      this._hideSearch();
    }
  }

  _handleInputBlur() {
    this._hideSearch();
  }

  _hideSearch() {
    this.set('isSearch', false);
  }

  _showSearch() {
    this.set('isSearch', true);
    setTimeout(() => this.shadowRoot.querySelector('#searchInput').focus(), 200);
  }

  _computeSearchClasses(isSearch) {
    return isSearch ? 'search' : '';
  }

  connectedCallback() {
    super.connectedCallback();
    this.rawItems = xsdbhelp;
    const pagingTable = this.shadowRoot.querySelector('exmg-paper-paging').shadowRoot.querySelector('paper-dropdown-menu');
    pagingTable.addEventListener('iron-select', e => {
      handlePaging(e, this);
    });
  }

}

window.customElements.define('xsdb-help-table', xsdbHelpTable);