import { __decorate } 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 '../../ui/dialog/UiDialog.js';
import '../../define/ui/ui-button.js';
import '../../define/ui/ui-icon.js';
import '../../define/ui/ui-text-field.js';
/**
 * 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 class RenameDialogElement extends UiDialog {
    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-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-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 value="dismiss" type="text" class="internal-button" @click="${this.handleDismiss}">${dismissLabel}</ui-button>
      <ui-button value="confirm" type="text" class="internal-button" ?disabled="${!this.hasValue}" @click="${this.handleConfirm}">${confirmLabel}</ui-button>
    </div>
    `;
    }
}
__decorate([
    property({ type: String })
], RenameDialogElement.prototype, "name", void 0);
__decorate([
    state()
], RenameDialogElement.prototype, "newValue", void 0);
//# sourceMappingURL=Rename.js.map