/**
@license
Copyright (c) 2018 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
*/

import { html } from '@polymer/lit-element';
import { PageViewElement } from './page-view-element.js';
import { connect } from 'pwa-helpers/connect-mixin.js';

// This element is connected to the Redux store.
import { store } from '../store.js';

// These are the shared styles needed by this element.
import { SharedStyles }       from './shared-styles.js';
import { ButtonSharedStyles } from './button-shared-styles.js'

// Import paper elements
import '@polymer/paper-input/paper-input.js';
import '@polymer/paper-card/paper-card.js';
import '@polymer/paper-slider/paper-slider.js';
import '@polymer/paper-button/paper-button.js';

// Import custom elements
import './request-element.js';
import './registry-element.js';

class MaoAdmin extends connect(store)(PageViewElement) {
  _render(props) {
    return html`
      ${SharedStyles}
      ${ButtonSharedStyles}

      <style>

      paper-card {
        display: block;
      }

      paper-button {
        display:  block;
      }

      .main-grid {
        display:  grid;
        grid-gap: 10px;

        grid-template-columns: 1fr;
      }

      td {
        text-align: center;
      }

      @media (min-width: 460px) {
        .main-grid {
          grid-template-columns: 1fr 1fr 1fr;
        }
      }

      </style>



      <section hidden="${!props.isAdmin}">

        <h2 class="underline">Hello Admin!</h2>

        <div class="main-grid">
          <paper-button raised class="info" id="toggleRequestsBtn" on-tap="${() => this.toggleRequests()}">Show Hours Requests</paper-button>
          <paper-button raised class="info" id="toggleRegistryBtn" on-tap="${() => this.toggleRegistry()}">Show Competitions And Registry</paper-button>
          <paper-button raised class="info" id="toggleRegistryBtn" on-tap="${() => this.usersHidden = !this.usersHidden}">${props.usersHidden ? 'Show User Data' : 'Hide User Data'}</paper-button>
        </div>

        <br/>

        <div hidden="${props.requestsHidden}">
          <div id="requests-grid" class="main-grid"></div>
        </div>

        <div hidden="${props.registryHidden || props.requestsHidden}">
          <br/>
          <hr/>
          <br/>
        </div>

        <div hidden="${props.registryHidden}">
          <div id="registry-grid" class="main-grid"></div>
        </div>

      </section>

      <div hidden="${props.usersHidden}">
        <br/>
        <hr/>
        <br/>
      </div>

      <section hidden="${!props.isAdmin || props.usersHidden}">
        <label>Search feature</label>
        <paper-input id="search" oninput="${() => this.search()}" label="Search for keyword (ex. theta, mfoiani, 2019, ...ect)"></paper-input>

        <br/>

        <table style="width: 100%;">
          <thead>
            <tr>
              <th>Username</th>
              <th>Hours</th> 
              <th>Divison</th>
            </tr>
          <thead>
          <tbody id="users-table-body">
          </tbody>
        </table>
      </section>
    `;
  }

  constructor() {
    super();

    this.requestsHidden = true;
    this.registryHidden = true;
    this.usersHidden    = true;
  }

  static get properties() { return {
    // This is the data from the store.
    signedIn:  Boolean,
    isAdmin:   Boolean,
    requests:  Array,
    registry:  Array,
    adminImgs: String,
    users:     Array,

    requestsHidden: Boolean,
    registryHidden: Boolean,
    usersHidden:    Boolean
  }}

  _firstRendered() {
    this.updateInformation();
  }
  
  _stateChanged(state) {
    this.signedIn = state.firebaseAuth  .signedIn;
    this.isAdmin  = state.firebaseAdmin .isAdmin;
    this.requests = state.firebaseAdmin .requests;
    this.registry = state.firebaseAdmin .compList;
    this.users    = state.firebaseAdmin .userList;
    this.adminImgs = state.firebaseAdmin.adminImgs;

    this.updateInformation();
  }

  toggleRequests() {
    this.requestsHidden = !this.requestsHidden;

    if(this.shadowRoot) {
      var btn = this.shadowRoot.getElementById('toggleRequestsBtn');
      if(this.requestsHidden) {
        btn.innerHTML = "Show Hours Requests";
      } else {
        btn.innerHTML = "Hide Hours Requests";
      }
    } else {
      console.log("Null shadow root");
    }
  }

  toggleRegistry() {
    this.registryHidden = !this.registryHidden;

    if(this.shadowRoot) {
      var btn = this.shadowRoot.getElementById('toggleRegistryBtn');
      if(this.registryHidden) {
        btn.innerHTML = "Show Comps & Registry";

      } else {
        btn.innerHTML = "Hide Comps & Registry";
      }
    } else {
      console.log("Null shadow root");
    }
  }

  search() {
    var key   = this.shadowRoot.getElementById('search').value.trim().toLowerCase();
    var query = this.shadowRoot.querySelectorAll('.search');
    query.forEach((child) => {
      if(key === '' || child.childNodes[0].innerHTML.toLowerCase().includes(key) 
                    || child.childNodes[1].innerHTML.toLowerCase().includes(key) 
                    || child.childNodes[2].innerHTML.toLowerCase().includes(key)) {
        child.hidden = false;
      }
      else {
        child.hidden = true;
      }
    });
  }

  updateInformation() {
    if(this.shadowRoot) {
      //update requests
      var requestGrid       = this.shadowRoot.getElementById('requests-grid');
      requestGrid.innerHTML = "";

      for(var i = 0; i<this.requests.length; i++) {
        var requestElement  = document.createElement('request-element');

        requestElement.email    = this.requests[i].email
                                .replace('@communityschoolnaples.org', '');
        requestElement.date     = this.requests[i].day;
        requestElement.location = this.requests[i].location;
        requestElement.time     = this.requests[i].time;
        requestElement.trainee  = this.requests[i].trainee;
        requestElement.subject  = this.requests[i].subject;
        requestElement.uid      = this.requests[i].uid;
        requestElement.docId    = this.requests[i].docId;
        requestElement.imgUrl   = this.requests[i].imgUrl;
        requestElement.imgPath  = this.requests[i].path;

        requestGrid.appendChild(requestElement);
      }

      //update registry
      var registryGrid        = this.shadowRoot.getElementById('registry-grid');
      registryGrid.innerHTML  = "";

      for(var i = 0; i < this.registry.length; i++) {
        var registryElement   = document.createElement('registry-element');

        registryElement.name      = this.registry[i].name;
        registryElement.divisons  = this.registry[i].divisons;

        registryGrid.appendChild(registryElement);
      }

      //update users
      var tableBody         = this.shadowRoot.getElementById('users-table-body');
      tableBody.innerHTML   = "";

      this.users.forEach((user) => {
        user = user.data();

        var tableRow = document.createElement('tr');
        tableRow.classList.add('search');

        var userEle = document.createElement('td');
        userEle.innerHTML = user['username'] ? user['username'] : "Unknown";


        var hoursEle        = document.createElement('td');
        hoursEle.innerHTML  = user['hours'];

        if(user['hours'] <= 1.0) {
          hoursEle.style.color = 'red';
        }

        else if (user['hours'] < 5.0) {
          hoursEle.style.color = '#f09300';
        }

        else {
          hoursEle.style.color = 'green';
        }


        var divisonEle = document .createElement('td');
        divisonEle.innerHTML  = user['divison'];
        switch (user['divison']) {
          case 'Mu':
            divisonEle.style.color = "#f09300";
          break;
          
          case 'Alpha':
            divisonEle.style.color = "#7baaf7";
          break;

          case 'Theta':
            divisonEle.style.color = "green";
          break;

          case 'Stats':
            divisonEle.style.color = "red";
          break;

          default:
            divisonEle.style.color = "black";
        }
      
        
        tableRow  .appendChild(userEle);
        tableRow  .appendChild(hoursEle);
        tableRow  .appendChild(divisonEle);
        tableBody .appendChild(tableRow);
      });
    }
  }


}

window.customElements.define('mao-admin', MaoAdmin);