import { __esDecorate, __runInitializers } from "tslib";
import { html } from 'lit';
import { property, state } from 'lit/decorators.js';
import { classMap } from 'lit/directives/class-map.js';
import { live } from 'lit/directives/live.js';
import UiDialog from '../../../md/dialog/internals/Dialog.js';
import '../../../md/button/ui-button.js';
import '../../../md/icons/ui-icon.js';
import '../../../md/text-field/ui-filled-text-field.js';
let RenameDialogElement = (() => {
    let _classSuper = UiDialog;
    let _name_decorators;
    let _name_initializers = [];
    let _name_extraInitializers = [];
    let _newValue_decorators;
    let _newValue_initializers = [];
    let _newValue_extraInitializers = [];
    return class RenameDialogElement extends _classSuper {
        static {
            const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(_classSuper[Symbol.metadata] ?? null) : void 0;
            _name_decorators = [property({ type: String })];
            _newValue_decorators = [state()];
            __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);
            __esDecorate(this, null, _newValue_decorators, { kind: "accessor", name: "newValue", static: false, private: false, access: { has: obj => "newValue" in obj, get: obj => obj.newValue, set: (obj, value) => { obj.newValue = value; } }, metadata: _metadata }, _newValue_initializers, _newValue_extraInitializers);
            if (_metadata) Object.defineProperty(this, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
        }
        #name_accessor_storage = __runInitializers(this, _name_initializers, void 0);
        /**
         * The previous name
         * @attribute
         */
        get name() { return this.#name_accessor_storage; }
        set name(value) { this.#name_accessor_storage = value; }
        #newValue_accessor_storage = (__runInitializers(this, _name_extraInitializers), __runInitializers(this, _newValue_initializers, void 0));
        get newValue() { return this.#newValue_accessor_storage; }
        set newValue(value) { this.#newValue_accessor_storage = value; }
        get hasValue() {
            const { newValue } = this;
            if (!newValue) {
                return false;
            }
            return newValue.trim().length > 0;
        }
        handleInput(e) {
            const input = e.target;
            this.newValue = input.value;
        }
        handleInputKeyDown(e) {
            const confirm = (e.ctrlKey || e.metaKey) && e.key === 'Enter';
            if (!confirm || !this.hasValue) {
                return;
            }
            this.handleInteraction('confirm');
        }
        handleInteraction(value) {
            if (value === 'confirm') {
                this.dialogValue = this.newValue;
            }
            else {
                this.dialogValue = undefined;
            }
            super.handleInteraction(value);
        }
        renderIcon() {
            const classes = {
                'icon': true,
                'with-icon': true,
            };
            return html ` <div class="${classMap(classes)}" part="icon"><ui-icon icon="rename"></ui-icon></div> `;
        }
        renderTitle() {
            const classes = {
                'title': true,
                'with-title': true,
            };
            return html ` <div class="${classMap(classes)}" part="title"><span>Rename</span></div> `;
        }
        renderBody() {
            const value = this.newValue || this.name || '';
            return html `
      <div class="content">
        <ui-filled-text-field
          class="file-name"
          type="text"
          name="name"
          required
          invalidText="The name is required. Please, enter the name."
          @input="${this.handleInput}"
          @keydown="${this.handleInputKeyDown}"
          .value="${live(value)}"
          label="Enter new name"
        ></ui-filled-text-field>
      </div>
    `;
        }
        renderButtons() {
            const { confirmLabel = 'Rename', 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"
          ?disabled="${!this.hasValue}"
          @click="${this.handleConfirm}"
          >${confirmLabel}</ui-button
        >
      </div>
    `;
        }
        constructor() {
            super(...arguments);
            __runInitializers(this, _newValue_extraInitializers);
        }
    };
})();
/**
 * A dialog that requests the user for the new name.
 *
 * 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
 * - value: The entered name value
 *
 * The application should handle the event and trigger name change flow.
 *
 * ```javascript
 * const dialog = document.createElement('rename-dialog');
 * dialog.name = 'old name';
 * document.body.appendChild(dialog);
 * dialog.open = true;
 * dialog.addEventListener('closed', (ev: Event) => {
 *   document.body.removeChild(dialog);
 *   const event = ev as CustomEvent<UiDialogClosingReason>;
 *   const { cancelled, value } = event.detail;
 *   if (!cancelled && value) {
 *     // trigger the flow, value is the new value
 *   }
 * });
 * ```
 */
export default RenameDialogElement;
//# sourceMappingURL=Rename.js.map