import { __esDecorate, __runInitializers } from "tslib";
import { html } from 'lit';
import { property } from 'lit/decorators.js';
import { 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';
let ConfirmDelete = (() => {
    let _classSuper = UiDialog;
    let _type_decorators;
    let _type_initializers = [];
    let _type_extraInitializers = [];
    let _names_decorators;
    let _names_initializers = [];
    let _names_extraInitializers = [];
    let _name_decorators;
    let _name_initializers = [];
    let _name_extraInitializers = [];
    return class ConfirmDelete extends _classSuper {
        static {
            const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(_classSuper[Symbol.metadata] ?? null) : void 0;
            _type_decorators = [property({ type: String, reflect: true })];
            _names_decorators = [property({ type: Array })];
            _name_decorators = [property({ type: Array })];
            __esDecorate(this, null, _type_decorators, { kind: "accessor", name: "type", static: false, private: false, access: { has: obj => "type" in obj, get: obj => obj.type, set: (obj, value) => { obj.type = value; } }, metadata: _metadata }, _type_initializers, _type_extraInitializers);
            __esDecorate(this, null, _names_decorators, { kind: "accessor", name: "names", static: false, private: false, access: { has: obj => "names" in obj, get: obj => obj.names, set: (obj, value) => { obj.names = value; } }, metadata: _metadata }, _names_initializers, _names_extraInitializers);
            __esDecorate(this, null, _name_decorators, { kind: "accessor", name: "name", static: false, private: false, access: { has: obj => "name" in obj, get: obj => obj.name, set: (obj, value) => { obj.name = value; } }, metadata: _metadata }, _name_initializers, _name_extraInitializers);
            if (_metadata) Object.defineProperty(this, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
        }
        #type_accessor_storage = __runInitializers(this, _type_initializers, void 0);
        /**
         * The type of the delete dialog. Renders a specialized view for the deleting type.
         */
        get type() { return this.#type_accessor_storage; }
        set type(value) { this.#type_accessor_storage = value; }
        #names_accessor_storage = (__runInitializers(this, _type_extraInitializers), __runInitializers(this, _names_initializers, void 0));
        /**
         * General purpose name of the objects to list as to delete.
         */
        get names() { return this.#names_accessor_storage; }
        set names(value) { this.#names_accessor_storage = value; }
        #name_accessor_storage = (__runInitializers(this, _names_extraInitializers), __runInitializers(this, _name_initializers, void 0));
        /**
         * General purpose name of the object to delete.
         */
        get name() { return this.#name_accessor_storage; }
        set name(value) { this.#name_accessor_storage = value; }
        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 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>
    `;
        }
        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>`;
        }
        constructor() {
            super(...arguments);
            __runInitializers(this, _name_extraInitializers);
        }
    };
})();
/**
 * 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 ConfirmDelete;
//# sourceMappingURL=ConfirmDelete.js.map