/**
@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, requestHours } 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>
      .title {
        grid-area: title;
      }

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

      .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;
        display: block;
      }

      paper-button {
        margin-left: auto;
        margin-right: auto;
        display: block;
      }

      h3 {
        text-align: center;
      }

      #datePicker {
        margin-top: 10px;
      }

      @media (min-width: 460px) {
        .hours-grid {
          grid-template-areas:
                          "title    title"
                          "item1    item2";
        }

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

      </style>

      <section>

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

          <div hidden="${props.signedIn}">
            <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"
                type=   "number"
                value=  "15"
                step=   "15"
                max=    "120">
                  <span slot="suffix">(minutes)</span>
                </paper-input>

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

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

                <br/>

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

            </div>

          </paper-card>
      </section>
    `;
  }

  static get properties() { return {
    // This is the data from the store.
    signedIn:           Boolean,
    authMessage:        String,
    hours:              Number,
    requestedHours:     Number,
    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.sumbitFieldsOpened = false;
  }

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

  requestHours() {
    if(this.shadowRoot) {
      var timeElement     = this.shadowRoot.getElementById('timeField');
      var traineeElement  = this.shadowRoot.getElementById('traineeField');
      var dateElement     = this.shadowRoot.getElementById('dateField')

      if( timeElement     .value.trim()  === "" ||
          traineeElement  .value.trim()  === "" ||
          dateElement     .value         === "") {
            alert("Please fill out all fields when making hours request.");
          } else {
            if(confirm('Are you sure that you want to send this request for hours?')) {
              const timeHours   = (timeElement  .value)
                                  /60;
              const traineeName = traineeElement.value;
              const date        = dateElement   .value;

              store.dispatch(requestHours(timeHours, traineeName, date));

              timeElement     .value = "";
              traineeElement  .value = "";
              dateElement     .value = "";
            }
        }
    }
  }

}

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