/**
@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 } from '../actions/firebase.js';

// We are lazy loading its reducer.
import firebase from '../reducers/firebase.js';

store.addReducers({
  firebase
});

// 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-dropdown-menu/paper-dropdown-menu.js';
import '@polymer/paper-item/paper-item.js';
import '@polymer/paper-slider/paper-slider.js';
import '@polymer/paper-button/paper-button.js';

// Import other customElements
import '@vaadin/vaadin-date-picker/vaadin-date-picker.js';

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

      <style>

      .tutoring-grid {
        display:  grid;
        grid-gap: 10px;

        grid-template-areas:
                        "title"
                        "card1"
                        "card2";
      }

      .title {
        grid-area: title;
      }

      .tutorCard, .hoursCard {
        background-color: #f7f7f7;
        padding:          1px;
      }

      .tutorCard {
        grid-area: card1;
      }

      .hoursCard {
        grid-area: card2;
      }

      .hours-grid {
        display:  grid;
        grid-gap: 10px;

        grid-template-areas:
                        "title"
                        "item1"
                        "item2";
      }

      .approved-card {
        grid-area:  item1;

        background-color: #b7e1cd;
        margin:           1px;
        padding:          0 10px 15px 10px;
      }

      .unapproved-card {
        grid-area:  item2;

        background-color: #fce8b2;
        margin:           1px;
        padding:          0 10px 15px 10px;
      }

      .submit-hours {
        width: 100%;
      }

      paper-card {
        --paper-card-background-color: #f7f7f7;
      }

      h3 {
        text-align: center;
      }

      #datePicker {
        margin-top: 10px;
      }

      @media (min-width: 460px) {
        .tutoring-grid {
          grid-template-areas:
                          "title title"
                          "card1 card2";
        }

        .hours-grid {
          grid-template-areas:
                          "title    title"
                          "item1    item2";
        }

        .tutorCard, .hoursCard {
          padding:  1em;
        }
      }

      </style>

      <section>
        <div class="tutoring-grid" id="tutoring-grid" hidden="${props.signedIn}">

          <div class="title">
            <h2 class="underline">Tutoring</h2>
          </div>

          <div class="tutorCard">
            <h3>Need to see or document hours?</h3>
            <paper-button
            class="info"
            raised
            hidden="${props.loginFieldsOpened}"
            on-tap="${() => this.toggleloginFields()}">Sign In</paper-button>

            <div hidden="${!props.loginFieldsOpened}">
              <paper-input label="username" id="emailField">
              </paper-input>

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

              <paper-button disabled="${props.signedIn}"  raised on-tap="${() => this.logIn()}">Sign In</paper-button>
              <paper-button disabled="${!props.signedIn}" raised on-tap="${() => store.dispatch(signOut())}">Sign Out</paper-button>
            </div>
          </div>

          <div hidden="${props.signedIn}" class="hoursCard">
            <h3>Hours</h3>
            <p>Every national society member must have at least 5 hours.</p>
            <p>You must sign in to see hours</p>
          </div>


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

            <div class="card-content">

              <div class="hours-grid">

                <div class="title">
                  <h2 class="underline">Summmary</h2>
                </div>

                <div class="approved-card">
                  <h3>Approved Hours</h3>
                  <div
                  hidden= "${props.hours===-1}"
                  class=  "circle"
                  style=  "background-color: #0f9d58;">${props.hours}</div>
                </div>

                <div class="unapproved-card">
                  <h3>Requested Hours</h3>
                  <div
                  hidden= "${props.requestedHours===-1}"
                  class=  "circle"
                  style=  "background-color: #f4b400;">${props.requestedHours}</div>
                </div>

              </div>

            </div>

            <div class="card-actions">
              <paper-button
              class="info"
              id="submit-hours-btn"
              on-tap="${() => this.toggleSubmitFields()}"
              hidden="${props.submitFieldsOpened}"
              raised>
                Submit Hours
              </paper-button>

              <div class="submit-card" hidden="${!props.submitFieldsOpened}">

                <h3>Fill Fields</h3>

                <p>How many hours of tutoring?</p>

                <paper-input id="timeField" label="Time"><span slot="suffix">(in minutes)</span></paper-input>

                <paper-input id="traineeField" label="Trainee's Name"></paper-input>

                <vaadin-date-picker id="dateField" placeholder="Choose Date">
                </vaadin-date-picker>

                <paper-button
                class="info"
                id="submit-form-btn"
                on-tap="${() => this.requestHours()}"
                raised>
                  Submit Form
                </paper-button>
              </div>

            </div>

          </paper-card>

        </div>
      </section>
      <section>



      </section>
    `;
  }

  static get properties() { return {
    // This is the data from the store.
    signedIn:       Boolean,
    authMessage:    String,
    hours:          Number,
    requestedHours: Number,

    loginFieldsOpened:  Boolean,
    submitFieldsOpened: Boolean
  }}

  _stateChanged(state) {
    this.hours          = state.firebase.hours;
    this.requestedHours = state.firebase.requestedHours;
    this.signedIn       = state.firebase.initialized;
    this.authMessage    = state.firebase.authMessage;

    this.loginFieldsOpened  = false;
    this.sumbitFieldsOpened = false;
  }

  logIn() {
    const email     = this.shadowRoot.getElementById('emailField')    .value +
                      '@communityschoolnaples.org';
    const password  = this.shadowRoot.getElementById('passwordField') .value;

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

  toggleloginFields() {
    this.loginFieldsOpened = !this.loginFieldsOpened;

    this.shadowRoot.getElementById('tutoring-grid').style = 'grid-template-areas: "title" "card1" "card2";';
  }

  toggleSubmitFields() {
    this.submitFieldsOpened = !this.submitFieldsOpened;
  }

  requestHours() {
    alert(this.shadowRoot.getElementById('dateField').value);
  }

}

window.customElements.define('mao-tutoring', MaoTutoring);