/**
@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 { LitElement, html } from '@polymer/lit-element';

// Import button styles
import { ButtonSharedStyles } from './button-shared-styles.js';

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

class RegistryElement extends LitElement {
  _render(props) {
    return html`
      ${ButtonSharedStyles}

      <style>

        paper-card {
            --paper-card-background-color: #ffffff;
            width:      100%;
            text-align: center;

            font-size: 125%;
        }

        .mus {
          color: #f09300;
        }

        .thetas {
          color: #00bfff;
        }

        .alphas {
          color: #7baaf7;
        }

        .other {
          color: #000000;
        }

        ol, h4 {
          text-align: left;
          word-break: break-all;
        }

      </style>
      <paper-card
      onmouseover   ="${() => this.toggleTabOpen()}"
      onmouseout    ="${() => this.toggleTabClosed()}">
        <div class="card-content">
            <h3>${props.name}</h3>
            <div class="info-tab" id="name-list" hidden="${!props.infoTabOpen}">

              <h4 class="mus">Mus</h4>
              <ol class="mus" id="name-list-mu">
              </ol>

              <h4 class="alphas">Alphas</h4>
              <ol class="alphas" id="name-list-alpha">
              </ol>

              <h4 class="thetas">Thetas</h4>
              <ol class="thetas" id="name-list-theta">
              </ol>


              <h4 class="other">Other</h4>
              <ol class="other" id="name-list-other">
              </ol>
            </div>
        </div>
      </paper-card>
    `;
  }

  static get properties() { return {
    name:       String,
    emails:     Array,
    divisions:  Array,

    infoTabOpen:  Boolean
  }};

  constructor() {
    super();

    this.name     = "";
    this.emails   = [];
    this.divisons = [];

    this.infoTabOpen  = false;
  }

  toggleTabOpen() {
    this.sortNames();
    this.infoTabOpen  = true;
  }

  toggleTabClosed() {
    this.infoTabOpen  = false;
  }

  sortNames() {
    var thetas  = this.shadowRoot.getElementById('name-list-theta');
    var alphas  = this.shadowRoot.getElementById('name-list-alpha');
    var mus     = this.shadowRoot.getElementById('name-list-mu');
    var other   = this.shadowRoot.getElementById('name-list-other');

    thetas.innerHTML  = "";
    alphas.innerHTML  = "";
    mus   .innerHTML  = "";
    other .innerHTML  = "";

    for(var i=0; i<this.emails.length; i++) {
      var listElement       = document        .createElement('li');
      listElement.innerHTML = this.emails[i]  .replace('@communityschoolnaples.org', '');
      if        (this.divisons[i].includes('Mu')) {
        mus     .appendChild(listElement);
      } else if (this.divisons[i].includes('Alpha')) {
        alphas  .appendChild(listElement)
      } else if (this.divisons[i].includes('Theta')) {
        thetas  .appendChild(listElement)
      } else {
        other  .appendChild(listElement);
      }
    }

  }

}

window.customElements.define('registry-element', RegistryElement);