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

        .alphas {
          color: #7baaf7;
        }

        .stats {
          color: red;
        }

        .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.replace("_", " ")}</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="stats">Stats</h4>
              <ol class="stats" id="name-list-stats">
              </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.divisons = [];

    this.infoTabOpen  = false;
  }

  _firstRendered() {
    this.fillNames();
  }

  toggleTabOpen() {
    this.infoTabOpen  = true;
  }

  toggleTabClosed() {
    this.infoTabOpen  = false;
  }

  fillNames() {
    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 stats   = this.shadowRoot.getElementById('name-list-stats');
    var other   = this.shadowRoot.getElementById('name-list-other');

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

    this.divisons.forEach((d) => {
      var listElement       = document  .createElement('li');
      listElement.innerHTML = d[0];
      if        (d[1].includes('Mu')) {
        mus     .appendChild(listElement);
      } else if (d[1].includes('Alpha')) {
        alphas  .appendChild(listElement)
      } else if (d[1].includes('Theta')) {
        thetas  .appendChild(listElement)
      } else if (d[1].includes('Stats')) {
        stats  .appendChild(listElement)
      } else {
        other  .appendChild(listElement);
      }
    });

  }

}

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