import { LitElement, html } from '@polymer/lit-element'
import { classMap } from 'lit-html/directives/classMap'

class MyDialog extends LitElement {

  constructor () {
    super()
    this.visible = false
  }

  static get properties () {
    return {
      visible: {type: Boolean}
    }
  }

  render () {
    console.log('Visible:', this.visible)
    return html`
<div class="${classMap({dialog: true, hidden: !this.visible, visible: this.visible})}">
    <h1 class="title ">Title</h1>
    <p class="content">This is a dialog</p>
    <div class="buttons">
      <button class="accept" @click="${() => this.dispatchEvent(new CustomEvent('dialog.accept'))}">Ok</button>
      <button class="cancel" @click="${() => this.dispatchEvent(new CustomEvent('dialog.cancel'))}">Cancel</button>
    </div>
</div>`
  }
}

customElements.define('my-dialog', MyDialog)

class MyApp extends LitElement {
  constructor () {
    super()
    this.dialogVisible = false
  }

  static get properties () {
    return {
      dialogVisible: {type: Boolean}
    }
  }

  render () {
    console.log('Dialog visible:', this.dialogVisible)
    return html`
<div>
    <button @click="${this.toggleDialog.bind(this)}">Toggle dialog</button>
    <my-dialog ?visible="${this.dialogVisible}"
               @dialog.accept="${this.closeDialog.bind(this)}"
               @dialog.cancel="${this.closeDialog.bind(this)}"></my-dialog>
</div>`
  }

  toggleDialog (e) {
    this.dialogVisible = !this.dialogVisible
    console.log(this.dialogVisible)
  }

  closeDialog (e) {
    console.log(e)
    this.dialogVisible = false
  }
}

customElements.define('my-app', MyApp)