import {html, PolymerElement} from '@polymer/polymer/polymer-element.js';
// import {html, LitElement } from '@polymer/lit-element/lit-element.js';
import '@polymer/paper-button/paper-button.js';
import '@polymer/paper-spinner/paper-spinner.js';
import { mixinBehaviors } from '@polymer/polymer/lib/legacy/class.js';
import { IronOverlayBehavior } from '@polymer/iron-overlay-behavior/iron-overlay-behavior.js';

/**
 * `rd-popup-new`
 *
 *
 * @customElement
 * @polymer
 * @demo demo/index.html
 */

 //todo: describe why
var MixedBehaviour = mixinBehaviors( IronOverlayBehavior, PolymerElement );

class RdPopupNew extends MixedBehaviour {
  constructor () {
    super();
    // console.log ( mixedBehaviour );
  }
  static get template() {
    return html`
      <style>
        :host {
          display: block;
        }
      </style>
      <h2>Hello [[prop1]]!</h2>

            <paper-spinner id="spinner"></paper-spinner>
            <paper-button id='button_close' on-tap='close'>Ok</paper-button>
    `;
  }

  static get properties() {
    return {
      prop1: {
        type: String,
        value: 'rd-popup-new',
      },
    };
  }
}

window.customElements.define('rd-popup-new', RdPopupNew);