/**
@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';

//These are the actions needed by this element.
import { archiveClass2019, archiveCompetitions2019 } from '../actions/firebaseFirestore.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;
      }

      .white {
        background-color: white;

        width: 50%;

        display: block;
        margin-right: auto;
        margin-left: auto;
      }

      .search-grid {
        display: grid;

        grid-template-columns: 1fr;
      }

      .search-grid > paper-button {
        display: grid;

        background-color: white;
      }

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

        .search-grid {
          grid-template-columns: 3fr 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 Comps & 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}">
          <paper-button on-tap="${() => this.confirmArchiveComps()}" class="white" raised>Archive Current Competitions</paper-button>
          <br/>
          <div id="registry-grid" class="main-grid"></div>
        </div>

      </section>

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

      <section hidden="${!props.isAdmin || props.usersHidden}">
        
        <div class="search-grid">

          <paper-input id="search" oninput="${() => this.search()}" label="Search for keyword (ex. theta, mfoiani, 2019, ...ect)"></paper-input>

          <paper-button raised on-tap="${() => this.confirmArchiveUsers()}">Archive Old Class</paper-button>

        </div>

        <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;
      }
    });
  }

  confirmArchiveUsers() {
    if(confirm('This will archive current hours and set all accounts with zero hours. It will also hide those in the previous graduating class. Are you sure that you want to do this?')){
      store.dispatch(archiveClass2019());
    }
  }

  confirmArchiveComps() {
    if(confirm('This will archive all current competitions and remove the registry for them. Are you sure that you want to do this?')) {
      store.dispatch(archiveCompetitions2019());
    }
  }

  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);