/**
@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 button styles
import { ButtonSharedStyles } from './button-shared-styles.js';

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

class RequestElement extends 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;
        }

      </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>Time:    ${'\t' + this.time}</p>
              <p>Trainee: ${'\t' + this.trainee}</p>
            </div>
        </div>
        <div hidden="${!props.infoTabOpen}" class="card-actions">
          <paper-button
          class="info"
          raised
          on-tap=   "${() => this.approveHours()}">
            Approve Hours
          </paper-button>
        </div>
      </paper-card>
    `;
  }

  static get properties() { return {
    email:    String,
    date:     String,
    time:     Number,
    trainee:  String,
    uid:      String,

    infoTabOpen:  Boolean
  }};

  constructor() {
    super();

    this.email    = "Unknown email";
    this.date     = "Unknown date";
    this.time     = -1;
    this.trainee  = "Unknown trainee";
    this.uid      = "Unknown uid";

    this.infoTabOpen  = false;
  }

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

  approveHours() {
    if(confirm('Are you sure you want to approve ' + this.time + ' hours for ' + this.email +' ?')) {
      this.dispatchEvent(new CustomEvent('approve-hours'));
    }
  }


}

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