import { html, TemplateResult } from 'lit';
import { DemoPage } from '../../../../src/pages/demo/DemoPage.js';
import '../../../../src/define/ui/ui-button.js';
import '../../../../src/define/ui/ui-icon.js';
import '../../../../src/define/ui/ui-dialog.js';
import '../../../../src/define/ui/ui-divider.js';
import '../../../../src/define/ui/ui-list.js';
import '../../../../src/define/ui/ui-list-item.js';
import { reactive } from '../../../../src/lib/decorators.js';
import { UiDialogClosingReason } from '../../../../src/ui/dialog/UiDialog.js';

class ComponentDemoPage extends DemoPage {
  componentName = 'UI dialog';

  @reactive() simpleOpened = false;

  @reactive() 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);
  }

  protected openImperative(): void {
    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);
    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.imperativeDialog()}
    `;
  }

  simpleDialog(): TemplateResult {
    return html`
    <section class="demo-section">
      <h2 class="title-large">Simple dialog</h2>
      <ui-button @click="${this.openSimple}">Open</ui-button>
      <ui-dialog ?open="${this.simpleOpened}" @close="${this.basicClosed}">
        <p>This is a confirmation dialog content</p>
        <ui-button slot="button" type="text" 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 @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 slot="button" type="text" @click="${this.handleInertButton}">Learn more</ui-button>
        <ui-button slot="button" value="dismiss" type="text">Cancel</ui-button>
        <ui-button slot="button" value="confirm" type="text">Accept</ui-button>
      </ui-dialog>
    </section>
    `;
  }

  imperativeDialog(): 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 @click="${this.openImperative}">Open</ui-button>
    </section>
    `;
  }
}

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