/**
@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/firebaseFirestore.js';
import { uploadPicture } from '../actions/firebaseStorage.js'

// 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-progress/paper-progress.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-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;
      }

      .subjectCard, .hopeCard {
        --paper-card-background-color: #87ceeb;
      }

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

      .picture-upload {
        display:  flex;
        width:    100%;
        flex-direction: column;
      }

      #uploader {
        appearance: none;
        width: 100%;
      }
      </style>

      <section class="img-section">
        <div class="container">
          <img src="https://ak0.picdn.net/shutterstock/videos/2342780/thumb/1.jpg" alt="Maths">
          <div class="centered">Tutoring</div>
        </div>
      </section>

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

        <paper-card
        elevation="0"
        class="hoursCard">

          <div class="card-content">

            <div class="hours-grid">

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

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

              <div class="unapproved-card">
                <h3>Requested Minutes</h3>
                <div
                class=  "circle"
                style=  "background-color: #f4b400;">${props.requestedHours*60}</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>

              <paper-input
              id=     "timeField"
              label=  "Time"
              type=   "number"
              value=  "15"
              step=   "15"
              max=    "120"
              min=    "15">
                <span slot="suffix">(minutes)</span>
              </paper-input>

              <paper-input id="locationField" label="Location" type="text"></paper-input>

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

              <paper-input id="subjectField" label="Math Subject" type="text"></paper-input>

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

              <div class="picture-upload">
                <paper-input onchange="${() => this.uploadFile()}" id="pictureField" label="Upload Picture With Trainee" type="file" accept="image/png, image/jpeg"></paper-input>
                <paper-progress value="0" max="100" id="uploader"></paper-progress>
              </div>
              
              <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="tutoring-grid">
          <paper-card class="subjectCard">
            <div class="card-actions">
              <h3>Our Hope</h3>
              <p>
                We want to encourage an enviornment of learnin through peer-to-peer tutoring.
                We offer all tutoring in all subjects for mao competitions and school subjects:
              </p>
              <ul>
                <li>Algebra (1 & 2)</li>
                <li>Geometry</li>
                <li>Pre-calculus</li>
                <li>Calculus (AB & BC)</li>
                <li>Statistics</li>
              </ul>
            </div>
          </paper-card>

          <paper-card class="hopeCard">
            <div class="card-actions">
              <h3>Need Help Finding A Tutor?</h3>
              <p>Please meet with your friends to create tutring sessions.</p>
              <p>Also, you can try the forum page.</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>
                 (813) 458-9988 
                </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,
    hours:              Number,
    requestedHours:     Number,
    isUploaded:         Boolean,
    pictureName:        String,

    submitFieldsOpened: Boolean
  }}

  _stateChanged(state) {
    this.hours          = state.firebaseFirestore .hours;
    this.requestedHours = state.firebaseFirestore .requestedHours;
    this.signedIn       = state.firebaseAuth      .signedIn;
    this.isUploaded     = state.firebaseStorage   .uploaded;
    this.pictureName    = state.firebaseStorage   .pictureName;

    this.sumbitFieldsOpened = false;
  }

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

  requestHours() {
    if(this.shadowRoot && this.isUploaded) {
      var timeElement     = this.shadowRoot.getElementById('timeField');
      var traineeElement  = this.shadowRoot.getElementById('traineeField');
      var subjectElement  = this.shadowRoot.getElementById('subjectField');
      var locationElement = this.shadowRoot.getElementById('locationField');
      var dateElement     = this.shadowRoot.getElementById('dateField');
      var uploaderElement = this.shadowRoot.getElementById('uploader');
      var fileElement     = this.shadowRoot.getElementById('pictureField');

      if( timeElement     .value.trim() === "" ||
          locationElement .value.trim() === "" ||
          traineeElement  .value.trim() === "" ||
          subjectElement  .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 location    = locationElement .value;
              const traineeName = traineeElement  .value;
              const subject     = subjectElement  .value;
              const date        = dateElement     .value;

              store.dispatch(requestHours(timeHours, traineeName, location, subject, date, this.pictureName));

              timeElement     .value  = "";
              traineeElement  .value  = "";
              subjectElement  .value  = "";
              locationElement .value  = "";
              dateElement     .value  = "";
              uploaderElement .value  =  0;
              fileElement     .value  = "";
            }
        }
    } else {
      alert("You must upload an image with your trainee to submit hours.")
    }
  }

  uploadFile() {
    if(this.shadowRoot) {
      var uploader    = this.shadowRoot.getElementById('uploader');
      uploader.value  = 0;

      var file      = this.shadowRoot.getElementById('pictureField').inputElement.inputElement.files[0];

      store.dispatch(uploadPicture(file, uploader));
    }
  }



}

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