/**
@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 { 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 iron-icon
import '@polymer/iron-icons/communication-icons.js';

// Import paper elements
import '@polymer/paper-input/paper-input.js';
import '@polymer/paper-card/paper-card.js';
import '@polymer/paper-item/paper-item.js';
import '@polymer/paper-item/paper-icon-item.js';
import '@polymer/paper-icon-button/paper-icon-button.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;
      }

      .hopeCard {
        --paper-card-background-color: #58d68d;
      }

      paper-item {
        display: block;
      }

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

      h3 {
        text-align: center;
      }

      #datePicker {
        margin-top: 10px;
      }

      .paper-item-link {
      color: inherit;
      text-decoration: none;
      }

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

        grid-template-columns: 1fr;
      }

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

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

        .tutoring-grid {
          grid-template-columns: 1fr 1fr;
        }
      }

      </style>

      <section>

        <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>

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

        <div class="tutoring-grid">
          <paper-card class="hopeCard">
            <div class="card-actions">
              <h3>Our Hope</h3>
              <p>We want to encourage an enviornment of help.</p>
            </div>
          </paper-card>

          <paper-card class="hopeCard">
            <div class="card-actions">
              <h3>Need Help Finiding A Tutor?</h3>
              <p>Please meet with your friends to create tutring sessions.</p>
              <p>Also, ypu can try the fourm page if you want.</p>
              <p>Otherwise, contact our tutoring coordinator <em>Mike Binkowski</em>.</p>
            </div>

            <div class="card-actions">
              <div role="listbox">
                <paper-icon-item>
                  <iron-icon icon="communication:call" slot="item-icon"></iron-icon>
                  (440)-256-1593
                </paper-icon-item>
                <a class="paper-item-link" href="mailto:mbinkowski2020@communityschoolnaples.org" tabindex="-1">
                  <paper-icon-item>
                    <iron-icon icon="communication:email" slot="item-icon"></iron-icon>
                    <span style="word-break: break-all;">mbinkowski2020@communityschoolnaples.org</span>
                  </paper-icon-item>
                </a>
              </div>
            </div>
          </paper-card>
        </div>
      </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);