/**
@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 CompetitionElement extends LitElement {
  _render(props) {
    return html`
      ${ButtonSharedStyles}

      <style>
        paper-card {
            --paper-card-background-color: #e1f5fe;
            width:      100%;
            text-align: center;
        }
      </style>

      <paper-card
      onmouseover   ="${() => this.toggleTab()}"
      onmouseout    ="${() => this.toggleTab()}">
        <div class="card-content">
            <h3>${props.name.replace(/[0-9]/g, '') + props.day}</h3>
            <h4>${props.location}</h4>
            <p hidden="${!props.infoTabOpen}"> ${props.information}</p>
        </div>
        <div hidden="${!props.infoTabOpen || !props.signedIn}" class="card-actions">
          <paper-button
          class="info"
          hidden="${props.isRegistered}"
          raised
          disabled= "${!props.signedIn}"
          on-tap=   "${() => this.registerComp()}">
          ${props.signedIn? "Register" : "Sign In"}
          </paper-button>

          <paper-button class="success"
          disabled
          hidden="${!props.isRegistered}">
          Already Registered
          </paper-button>
        </div>
      </paper-card>
    `;
  }

  static get properties() { return {
    name:         String,
    day:          String,
    information:  String,
    location:     String,
    infoTabOpen:  Boolean,
    signedIn:     Boolean,
    isRegistered: Boolean
  }};

  constructor() {
    super();

    this.name         =   "Competition";
    this.day          =   "";
    this.information  =   "Competition Information";
    this.location     =   "Competition Location";
    this.infoTabOpen  =   false;
    this.signedIn     =   false;
    this.isRegistered =   false;
  }

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

  registerComp() {
    if(confirm('Are you sure you want to register for ' + this.name + '?')) {
      this.dispatchEvent(new CustomEvent('register-comp'));
    }
  }

}

window.customElements.define('competition-element', CompetitionElement);