/**
@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 { LitElement, html } from '@polymer/lit-element';
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 { adminApproveHours, adminRejectHours } from '../actions/firebaseAdmin.js';

// Import button styles
import { ButtonSharedStyles } from './button-shared-styles.js';

// Import paper elements
import '@polymer/paper-card/paper-card.js';
import '@polymer/paper-button/paper-button.js';

class RequestElement extends connect(store)(LitElement) {
  _render(props) {
    return html`
      ${ButtonSharedStyles}

      <style>

        paper-card {
          --paper-card-background-color: #ffffff;
          width:      100%;
          text-align: center;
        }

        .info-tab > p {
          word-break: break-all;
        }

        .main-image {
          width: 100%;
          --iron-image-width: 100%;
        }


      </style>
      <paper-card
      onmouseover   ="${() => this.toggleTab()}"
      onmouseout    ="${() => this.toggleTab()}">
        <div class="card-content">
            <h3>From: ${'\t' + props.email.replace('@communityschoolnaples.org', '')}</h3>
            <h4>Date: ${'\t' + props.date}</h4>
            <div class="info-tab" hidden="${!props.infoTabOpen}">
              <p><em>Location:</em> ${'\t' + this.location   }</p>
              <p><em>Minutes: </em> ${'\t' + (this.time*60)  }</p>
              <p><em>Trainee: </em> ${'\t' +  this.trainee   }</p>
              <p><em>Subject: </em> ${'\t' +  this.subject   }</p>
            </div>
        </div>
        <div hidden="${!props.infoTabOpen}" class="card-actions">
          <paper-button
          class="info"
          raised
          on-tap=   "${() => this.approveHours()}">
            Approve Time
          </paper-button>
          <paper-button
          class="alert"
          raised
          on-tap=   "${() => this.rejectHours()}">
            Reject Time
          </paper-button>
          
          <hr/>

          <iron-image
          class="main-image"
          preload
          src="${props.imgUrl}">
          </iron-image>
        </div>
      </paper-card>
    `;
  }

  static get properties() { return {
    email:    String,
    date:     String,
    location: String,
    time:     Number,
    trainee:  String,
    subject:  String,
    uid:      String,
    id:       String,
    imgUrl:   String,
    imgPath:  String,

    infoTabOpen:  Boolean
  }};

  constructor() {
    super();

    this.email    = "Unknown email";
    this.date     = "Unknown date";
    this.location = "Unknown location";
    this.time     = -1;
    this.trainee  = "Unknown trainee";
    this.subject  = "Unknown subject";
    this.uid      = "Unknown uid";
    this.docId    = "Unknown docId";
    this.imgUrl   = ""
    this.imgPath  = "";

    this.infoTabOpen  = false;
  }

  _stateChanged(state) {
    //lmao just need this here for the memes
  }

  toggleTab() {
    this.infoTabOpen  = !this.infoTabOpen;
  }

  approveHours() {
    if(confirm('Are you sure you want to APPROVE ' + (this.time*60) + ' minutes for ' + this.email +' ?')) {
      store.dispatch(adminApproveHours(this.uid, this.time, this.docId, this.imgPath));
    }
  }

  rejectHours() {
    if(confirm('Are you sure you want to REJECT ' + (this.time*60) + ' minutes for ' + this.email +' ?')) {
      store.dispatch(adminRejectHours(this.docId, this.imgPath));
    }
  }


}

window.customElements.define('request-element', RequestElement);