var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
    return c > 3 && r && Object.defineProperty(target, key, r), r;
};
import { ShadowlessElement, WithDisposable } from '@blockeditor/lit';
import { html } from 'lit';
import { customElement, property, query, state } from 'lit/decorators.js';
import { classMap } from 'lit/directives/class-map.js';
import { toast } from '../../toast.js';
import { embedCardModalStyles } from './styles.js';
let EmbedCardEditModal = class EmbedCardEditModal extends WithDisposable(ShadowlessElement) {
    constructor() {
        super(...arguments);
        this._titleInputValue = '';
    }
    connectedCallback() {
        super.connectedCallback();
        this.updateComplete
            .then(() => {
            this.titleInput.focus();
            this.titleInput.setSelectionRange(0, this.titleInput.value.length);
        })
            .catch(console.error);
        this.disposables.addFromEvent(this, 'keydown', this._onDocumentKeydown);
        this._titleInputValue = this.model.title ?? '';
    }
    _handleInput(e) {
        const target = e.target;
        this._titleInputValue = target.value;
    }
    _onDocumentKeydown(e) {
        e.stopPropagation();
        if (e.key === 'Enter' && !e.isComposing) {
            this._onSave();
        }
        if (e.key === 'Escape') {
            this.remove();
        }
    }
    _onSave() {
        const title = this.titleInput.value;
        if (title.length === 0) {
            toast('Link title can not be empty');
            return;
        }
        this.model.page.updateBlock(this.model, {
            title,
            description: this.descInput.value,
        });
        this.remove();
    }
    render() {
        return html `
      <div class="embed-card-modal blockeditor-overlay">
        <div class="embed-card-modal-mask" @click=${() => this.remove()}></div>
        <div class="embed-card-modal-wrapper">
          <div class="embed-card-modal-title">Edit Link</div>

          <div class="embed-card-modal-content">
            <input
              class="embed-card-modal-input title"
              type="text"
              placeholder="Title"
              value=${this._titleInputValue}
              @input=${this._handleInput}
              tabindex="0"
            />

            <textarea
              class="embed-card-modal-input description"
              placeholder="Description"
              .value=${this.model.description ?? ''}
              tabindex="0"
            ></textarea>
          </div>

          <div class="embed-card-modal-action">
            <div
              class="embed-card-modal-button cancel"
              tabindex="0"
              @click=${() => this.remove()}
            >
              Cancel
            </div>

            <div
              class=${classMap({
            'embed-card-modal-button': true,
            save: true,
            disabled: this._titleInputValue.length === 0,
        })}
              tabindex="0"
              @click=${() => this._onSave()}
            >
              Save
            </div>
          </div>
        </div>
      </div>
    `;
    }
};
EmbedCardEditModal.styles = embedCardModalStyles;
__decorate([
    property({ attribute: false })
], EmbedCardEditModal.prototype, "model", void 0);
__decorate([
    query('.title')
], EmbedCardEditModal.prototype, "titleInput", void 0);
__decorate([
    query('.description')
], EmbedCardEditModal.prototype, "descInput", void 0);
__decorate([
    state()
], EmbedCardEditModal.prototype, "_titleInputValue", void 0);
EmbedCardEditModal = __decorate([
    customElement('embed-card-edit-modal')
], EmbedCardEditModal);
export { EmbedCardEditModal };
export function toggleEmbedCardEditModal(host, embedCardModel) {
    host.selection.clear();
    const embedCardEditModal = new EmbedCardEditModal();
    embedCardEditModal.model = embedCardModel;
    document.body.appendChild(embedCardEditModal);
}
//# sourceMappingURL=embed-card-edit-modal.js.map