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


      @media (min-width: 460px) {
        .main-grid {
          grid-template-columns: 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="success" id="toggleRegistryBtn" on-tap="${() => this.toggleRegistry()}">Show Competitions And Registry</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>
    `;
  }

  constructor() {
    super();

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

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

    requestsHidden: Boolean,
    registryHidden: 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.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");
    }
  }

  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.emails    = this.registry[i].emails;
        registryElement.divisons  = this.registry[i].divisons;

        registryGrid.appendChild(registryElement);
      }
    }
  }

  approveHours() {
    alert("Approve hours");
  }


}

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