import {html, PolymerElement} from '@polymer/polymer/polymer-element.js';
import '@polymer/polymer/lib/elements/dom-repeat.js';
import '@polymer/paper-button/paper-button.js';
import 'ptcs-button/ptcs-button.js';

/**
 * `simple-el`
 * Very simple el
 *
 * @customElement
 * @polymer
 * @demo demo/index.html
 */
class SimpleEl extends PolymerElement {
  static get template() {
    return html`
      <style>
        :host {
          display: block;
        }
        paper-button {
          background: yellow;
        }
      </style>
      <h1>Hello [[prop1]]!</h1>
      <h2>And welcome [[prop2]]!</h2>
      <paper-button>Simple button</paper-button>
	  <ptcs-button label='PTCS button'></ptcs-button>
	
      <template is="dom-repeat" items="[[items]]">
        <div part="label">[[item]]</div>
      </template>
    `;
  }

  static get is() {
      return 'simple-el';
  }

  static get properties() {
    return {
      prop1: {
        type: String,
        value: 'simple-el',
      },
      prop2: {
        type: String,
        value: 'Polymer',
      },

      // Items supplied by the client. Read-only
      items: {
          type:  Array,
          value: () => ['foo', 'bar', 'baz']
      }
    };
  }

  foo() {
    console.log('simple-el:::foo');
  }
}

window.customElements.define(SimpleEl.is, SimpleEl);
