import { __decorate } from "tslib";
import { html } from 'lit';
import { property } from 'lit/decorators.js';
import { classMap } from 'lit/directives/class-map.js';
import UiDialog from '../../ui/dialog/UiDialog.js';
import '../../define/ui/ui-button.js';
import '../../define/ui/ui-icon.js';
/**
 * 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 {
    renderIcon() {
        const classes = {
            icon: true,
            'with-icon': true,
        };
        return html `
    <div class="${classMap(classes)}" part="icon"><ui-icon icon="deleteOutline"></ui-icon></div>
    `;
    }
    renderTitle() {
        const classes = {
            title: true,
            'with-title': true,
        };
        return html `
    <div class="${classMap(classes)}" part="title"><span>Confirm delete</span></div>
    `;
    }
    renderBody() {
        return html `
    <div class="content">${this.renderContent()}</div>
    `;
    }
    renderButtons() {
        const { confirmLabel = 'Delete', dismissLabel = 'Cancel' } = this;
        const classes = {
            buttons: true,
            'with-buttons': true,
        };
        return html `
    <div class="${classMap(classes)}" part="button">
      <ui-button value="dismiss" type="text" class="internal-button" @click="${this.handleDismiss}">${dismissLabel}</ui-button>
      <ui-button value="confirm" type="text" class="internal-button" @click="${this.handleConfirm}">${confirmLabel}</ui-button>
    </div>
    `;
    }
    renderContent() {
        switch (this.type) {
            case 'files': return this.renderFiles();
            case 'project': return this.renderProject();
            default: return this._fallbackTemplate();
        }
    }
    renderFiles() {
        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>
    `;
    }
    renderProject() {
        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>`;
    }
    _fallbackTemplate() {
        return html `<slot><p>Are you sure you want to delete this?</p></slot>`;
    }
}
__decorate([
    property({ type: String, reflect: true })
], ConfirmDelete.prototype, "type", void 0);
__decorate([
    property({ type: Array })
], ConfirmDelete.prototype, "names", void 0);
__decorate([
    property({ type: Array })
], ConfirmDelete.prototype, "name", void 0);
//# sourceMappingURL=ConfirmDelete.js.map