/**
@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 actions needed by this element.
import { signIn, signOut, createAccount } from '../actions/firebaseAuth.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';

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

      <style>

      .sign-in-card, .acc-info-card, .create-acc-card {
        display: block;
      }

      .card-actions > paper-button {
        margin-left:  auto;
        margin-right: auto;
        display: block;
        width: 50%;
      }

      .account-email, span {
        word-break: break-all;
      }

      .center {
        text-align: center;
      }

      .create-acc-card {
        --paper-card-background-color: #f7f7f7;
      }

      </style>



      <section>



        <paper-card class="sign-in-card" elevation="0" hidden="${props.signedIn}">

          <div class="card-content">
            <h2 class="underline">Sign In</h2>

              <paper-input name="username" type="text" label="username" id="emailField">
              </paper-input>

              <paper-input name="password" type="password" label="password" id="passwordField">
              </paper-input>

          </div>

          <div class="card-actions">
            <paper-button class="info" hidden="${props.signedIn}"  raised on-tap="${() => this.logIn()}">Sign In</paper-button>
          </div>

        </paper-card>

        <paper-card class="acc-info-card" elevation="0" hidden="${!props.signedIn}">

          <div class="card-content">
            <h2 class="underline">Account</h2>

            <div class="center">
              <h3>Email</h3>
              <p class="account-email">${props.userEmail}</p>

              <h3>Username</h3>
              <p>${props.userEmail.replace("@communityschoolnaples.org", "")}</p>

              <h3>Divison</h3>
              <p>${props.divison}</p>

              <h3 hidden="${props.registeredComps.length<1}">Registered Competitions</h3>
              <div id="competition-list"></div>
            </div>
          </div>

          <div class="card-actions">
            <paper-button class="info" raised on-tap="${() => store.dispatch(signOut())}">Sign Out</paper-button>
          </div>

        </paper-card>

      </section>

      <section hidden="${props.signedIn}">

      <paper-card class="create-acc-card" elevation="0">

        <div class="card-content">
          <h2 class="underline">Create Account</h2>

          <paper-input label="email" id="createEmailField">
            <span slot="suffix">@communityschoolnaples.org</span>
          </paper-input>

          <paper-input type="password" label="password" id="createPasswordField">
          </paper-input>

          <select id="createDivisonField">
              <option value="">--Divison--</option>
              <option value="Mu">Mu</option>
              <option value="Alpha">Alpha</option>
              <option value="Theta">Theta</option>
              <option value="Stats">Stats</option>
          </select>
        </div>

        <div class="card-actions">
          <paper-button class="info" hidden="${props.signedIn}"  raised on-tap="${() => this.makeAccount()}">Create Account</paper-button>
        </div>

      </paper-card>

      </section>
    `;
  }

  static get properties() { return {
    // This is the data from the store.
    signedIn:         Boolean,
    userEmail:        String,
    registeredComps:  Array,
    divison:          String
  }}

  _stateChanged(state) {
    this.signedIn     = state.firebaseAuth      .signedIn;
    this.userEmail    = state.firebaseAuth      .userEmail;
    this.divison      = state.firebaseFirestore .divison;

    this.registeredComps  =     state.firebaseFirestore.registeredComps;
    this.createCompetitionList( this.registeredComps);
  }

  logIn() {
    if(this.shadowRoot) {
      var emailElement     = this.shadowRoot.getElementById('emailField');
      var passwordElement  = this.shadowRoot.getElementById('passwordField');

      const email     = emailElement.value
                        + "@communityschoolnaples.org";
      const password  = passwordElement.value;

      store.dispatch(signIn(email,password,null));

      emailElement.value    = "";
      passwordElement.value = "";
    }
  }

  createCompetitionList(comps) {
    if(this.shadowRoot) {
      var listArea        = this.shadowRoot.getElementById('competition-list');
      listArea.innerHTML  = "";

      var mainDiv   = document.createElement('div');
      mainDiv.role  = "listbox";

      for(var i = 0; i < comps.length; i++) {
        var competitionElement        = document.createElement('p');
        competitionElement.innerHTML  = comps[i].replace('_', ' ');
        competitionElement.class      = "center";
        mainDiv.appendChild(            competitionElement);
      }

      listArea.appendChild(mainDiv);
    }
  }

  makeAccount() {
    var emailElement     = this.shadowRoot.getElementById('createEmailField');
    var passwordElement  = this.shadowRoot.getElementById('createPasswordField');
    var divisonElement   = this.shadowRoot.getElementById('createDivisonField');

    if( emailElement.value.includes('2022') ||
        emailElement.value.includes('2021') ||
        emailElement.value.includes('2020') ||
        emailElement.value.includes('2023')
      )
    {
      if(divisonElement.value == "") {
        alert('Plase choose your divison');
      } else {
        const email     = emailElement.value
                          + "@communityschoolnaples.org";
        const password  = passwordElement.value;
        const divison  =  divisonElement.value;

        store.dispatch(createAccount(email,password,divison));
      }
    } else {
      alert('Please use a validated email.');
    }

    emailElement.value    = "";
    passwordElement.value = "";
    divisonElement.value  = "";
  }

}

window.customElements.define('mao-account', MaoAccount);