import { TemplateResult, html } from 'lit'
import { property } from 'lit/decorators.js'
import { ClassInfo, classMap } from 'lit/directives/class-map.js'
import UiDialog from '../../../md/dialog/internals/Dialog.js'
import '../../md/button/ui-button.js'
import '../../md/icons/ui-icon.js'

export type IDialogType = 'files' | 'project'

/**
 * A dialog that requests the user to confirm a delete action.
 *
 * Listen to the `closed` on the dialog. The CustomEvent has the `detail`
 * object with the `closingReason` retails:
 * - canceled: whether the dialog was cancelled (ESC, outside click, dismiss button)
 * - confirmed: whether the dialog was confirmed by the user
 *
 * The application should handle the event and trigger delete flow.
 *
 * ```javascript
 * const dialog = document.createElement('confirm-delete-dialog');
 * dialog.opened = true;
 * document.body.appendChild(dialog);
 * dialog.addEventListener('closed', (ev: Event) => {
 *   document.body.removeChild(dialog);
 *   const event = ev as CustomEvent;
 *   const { canceled, confirmed } = event.detail;
 *   if (!canceled && confirmed) {
 *     // trigger the flow
 *   }
 * });
 * ```
 */
export default class ConfirmDelete extends UiDialog {
  /**
   * The type of the delete dialog. Renders a specialized view for the deleting type.
   */
  @property({ type: String, reflect: true }) accessor type: IDialogType | undefined

  /**
   * General purpose name of the objects to list as to delete.
   */
  @property({ type: Array }) accessor names: string[] | undefined

  /**
   * General purpose name of the object to delete.
   */
  @property({ type: Array }) accessor name: string | undefined

  override renderIcon(): TemplateResult {
    const classes: ClassInfo = {
      'icon': true,
      'with-icon': true,
    }
    return html` <div class="${classMap(classes)}" part="icon"><ui-icon icon="deleteOutline"></ui-icon></div> `
  }

  override renderTitle(): TemplateResult {
    const classes: ClassInfo = {
      'title': true,
      'with-title': true,
    }
    return html` <div class="${classMap(classes)}" part="title"><span>Confirm delete</span></div> `
  }

  override renderBody(): TemplateResult {
    return html` <div class="content">${this.renderContent()}</div> `
  }

  override renderButtons(): TemplateResult {
    const { confirmLabel = 'Delete', dismissLabel = 'Cancel' } = this
    const classes: ClassInfo = {
      'buttons': true,
      'with-buttons': true,
    }
    return html`
      <div class="${classMap(classes)}" part="button">
        <ui-button color="text" value="dismiss" class="internal-button" @click="${this.handleDismiss}"
          >${dismissLabel}</ui-button
        >
        <ui-button color="text" value="confirm" class="internal-button" @click="${this.handleConfirm}"
          >${confirmLabel}</ui-button
        >
      </div>
    `
  }

  protected override renderContent(): TemplateResult {
    switch (this.type) {
      case 'files':
        return this.renderFiles()
      case 'project':
        return this.renderProject()
      default:
        return this._fallbackTemplate()
    }
  }

  protected renderFiles(): TemplateResult {
    const { names = [] } = this
    if (!names.length) {
      return html`<slot><p>Are you sure you want to delete these files?</p></slot>`
    }
    if (names.length === 1) {
      return html` <p>Confirm moving <b>${names[0]}</b> to trash.</p> `
    }
    return html`
      <p>Files to be moved to thrash:</p>
      <ul>
        ${names.map((n) => html`<li>${n}</li>`)}
      </ul>
    `
  }

  protected renderProject(): TemplateResult {
    const { name } = this
    if (!name) {
      return html`<slot><p>Are you sure you want to delete this project?</p></slot>`
    }
    return html`<slot
      ><p>Are you sure you want to delete <b>${name}</b> project?</p></slot
    >`
  }

  protected _fallbackTemplate(): TemplateResult {
    return html`<slot><p>Are you sure you want to delete this?</p></slot>`
  }
}
