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

      <style>

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

      </style>
      <paper-card
      image     = "${props.image}"
      elevation = "0">
        <div class="card-content">
            <p>${props.information}</p>
            <ol>
              <li hidden="${!props.dates[0]}">${props.dates[0]}</li>
              <li hidden="${!props.dates[1]}">${props.dates[1]}</li>
              <li hidden="${!props.dates[2]}">${props.dates[2]}</li>
              <li hidden="${!props.dates[3]}">${props.dates[3]}</li>
              <li hidden="${!props.dates[4]}">${props.dates[4]}</li>
              <li hidden="${!props.dates[5]}">${props.dates[5]}</li>  
            </ol>
        </div>
        <div class="card-actions" hidden="${!props.signedIn}">
          <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,
    information:  String,
    dates:        Array,
    image:        String,
    signedIn:     Boolean,
    isRegistered: Boolean
  }};

  constructor() {
    super();

    this.name           =   "Competition";
    this.information    =   "Competition Information";
    this.dates          =   ["Date 0", "Date 1", "Date 2", "Date 3", "Date 4", "Date 5"];
    this.image          =   "Image Path";
    this.signedIn       =   false;
    this.isRegistered   =   false;
  }

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


}

window.customElements.define('test-element', TestElement);