import { html, TemplateResult } from 'lit'
import { DemoPage } from '../../../src/demo/DemoPage.js'
import '../../../src/md/button/ui-button.js'
import '../../../src/md/icons/ui-icon.js'
import '../../../src/md/dialog/ui-dialog.js'
import '../../../src/md/divider/ui-divider.js'
import '../../../src/md/list/ui-list.js'
import '../../../src/md/list/ui-list-item.js'
import { reactive } from '../../../src/decorators/index.js'
import UiDialog, { type UiDialogClosingReason } from '../../../src/md/dialog/internals/Dialog.js'

class ComponentDemoPage extends DemoPage {
  override accessor componentName = 'UI dialog'

  @reactive() accessor simpleOpened = false

  @reactive() accessor fullOpened = false

  protected openSimple(): void {
    this.simpleOpened = true
  }

  protected basicClosed(e: CustomEvent<UiDialogClosingReason>): void {
    this.simpleOpened = false
    this.reportClosingReason(e.detail)
  }

  protected openFull(): void {
    this.fullOpened = true
  }

  protected fullClosed(e: CustomEvent<UiDialogClosingReason>): void {
    this.fullOpened = false
    this.reportClosingReason(e.detail)
  }

  imperativeDialog: UiDialog | null = null

  protected openImperative(): void {
    if (this.imperativeDialog) {
      document.body.removeChild(this.imperativeDialog)
      this.imperativeDialog = null
    }
    const dialog = document.createElement('ui-dialog')
    dialog.textContent = 'This is a dialog content.'
    dialog.dismissLabel = 'Close'
    dialog.confirmLabel = 'OK'
    dialog.open = true
    document.body.appendChild(dialog)
    this.imperativeDialog = dialog
    dialog.addEventListener('close', (e: Event): void => {
      document.body.removeChild(dialog)
      const event = e as CustomEvent<UiDialogClosingReason>
      this.reportClosingReason(event.detail)
    })
  }

  protected reportClosingReason(reason: UiDialogClosingReason): void {
    if (reason.cancelled) {
      console.log('The dialog was dismissed')
    } else {
      console.log('The dialog was confirmed')
    }
  }

  protected handleInertButton(): void {
    console.log('An inert button was clicked.')
  }

  contentTemplate(): TemplateResult {
    return html`
      <a href="../">Back</a>
      ${this.simpleDialog()} ${this.fullDialog()} ${this.renderImperativeDialog()}
    `
  }

  simpleDialog(): TemplateResult {
    return html`
      <section class="demo-section">
        <h2 class="title-large">Simple dialog</h2>
        <ui-button color="filled" @click="${this.openSimple}">Open</ui-button>
        <ui-dialog ?open="${this.simpleOpened}" @close="${this.basicClosed}">
          <p>This is a confirmation dialog content</p>
          <ui-button color="text" slot="button" value="dismiss">Dismiss</ui-button>
        </ui-dialog>
      </section>
    `
  }

  fullDialog(): TemplateResult {
    return html`
      <section class="demo-section">
        <h2 class="title-large">Full UI dialog</h2>
        <ui-button color="filled" @click="${this.openFull}">Open</ui-button>
        <ui-dialog ?open="${this.fullOpened}" @close="${this.fullClosed}" modal style="--ui-dialog-max-width: 380px">
          <ui-icon slot="icon" icon="deleteOutline"></ui-icon>
          <span slot="title">Reset settings?</span>
          <p>
            This will reset your app preferences back to their default settings. The following accounts will also be
            signed out:
          </p>
          <ui-divider></ui-divider>
          <ui-list>
            <ui-list-item>email1@gmail.com</ui-list-item>
            <ui-list-item>email2@gmail.com</ui-list-item>
          </ui-list>
          <ui-divider></ui-divider>
          <ui-button color="text" slot="button" @click="${this.handleInertButton}">Learn more</ui-button>
          <ui-button color="text" slot="button" value="dismiss">Cancel</ui-button>
          <ui-button color="text" slot="button" value="confirm">Accept</ui-button>
        </ui-dialog>
      </section>
    `
  }

  renderImperativeDialog(): TemplateResult {
    return html`
      <section class="demo-section">
        <h2 class="title-large">Imperative dialog</h2>
        <p>This dialog is created using imperative API.</p>
        <ui-button color="filled" @click="${this.openImperative}">Open</ui-button>
      </section>
    `
  }
}

const instance = new ComponentDemoPage()
instance.render()
