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 { assertExists } from '@blockeditor/global/utils';
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 { Bound } from '../../../../surface-block/utils/bound.js';
import { Vec } from '../../../../surface-block/utils/vec.js';
import { EMBED_CARD_HEIGHT, EMBED_CARD_WIDTH } from '../../../consts.js';
import { getPageByEditorHost } from '../../../utils/query.js';
import { isValidUrl } from '../../../utils/url.js';
import { toast } from '../../toast.js';
import { embedCardModalStyles } from './styles.js';
let EmbedCardCreateModal = class EmbedCardCreateModal extends WithDisposable(ShadowlessElement) {
    constructor() {
        super(...arguments);
        this._linkInputValue = '';
        this._onDocumentKeydown = (e) => {
            e.stopPropagation();
            if (e.key === 'Enter' && !e.isComposing) {
                this._onConfirm();
            }
            if (e.key === 'Escape') {
                this.remove();
            }
        };
        this._onConfirm = () => {
            const url = this.input.value;
            if (!isValidUrl(url)) {
                toast('Invalid link');
                return;
            }
            const pageService = this.host.spec.getService('affine:page');
            assertExists(pageService);
            const embedOptions = pageService.getEmbedBlockOptions(url);
            const { mode } = this.createOptions;
            if (mode === 'page') {
                const { parentModel, index } = this.createOptions;
                let flavour = 'affine:bookmark';
                if (embedOptions) {
                    flavour = embedOptions.flavour;
                }
                this.host.page.addBlock(flavour, {
                    url,
                }, parentModel, index);
            }
            else if (mode === 'edgeless') {
                let flavour = 'affine:bookmark', targetStyle = 'vertical';
                if (embedOptions) {
                    flavour = embedOptions.flavour;
                    targetStyle = embedOptions.styles[0];
                }
                const edgelessPageElement = getPageByEditorHost(this.host);
                assertExists(edgelessPageElement);
                const surface = edgelessPageElement.surface;
                const center = Vec.toVec(surface.viewport.center);
                surface.addElement(flavour, {
                    url,
                    xywh: Bound.fromCenter(center, EMBED_CARD_WIDTH[targetStyle], EMBED_CARD_HEIGHT[targetStyle]).serialize(),
                    style: targetStyle,
                }, surface.model);
                edgelessPageElement.tools.setEdgelessTool({
                    type: 'default',
                });
            }
            this.onConfirm();
            this.remove();
        };
        this._onCancel = () => {
            this.remove();
        };
    }
    connectedCallback() {
        super.connectedCallback();
        this.updateComplete
            .then(() => {
            requestAnimationFrame(() => {
                this.input.focus();
            });
        })
            .catch(console.error);
        this.disposables.addFromEvent(this, 'keydown', this._onDocumentKeydown);
    }
    _handleInput(e) {
        const target = e.target;
        this._linkInputValue = target.value;
    }
    render() {
        return html `<div class="embed-card-modal blockeditor-overlay">
      <div class="embed-card-modal-mask" @click=${this._onCancel}></div>
      <div class="embed-card-modal-wrapper">
        <div class="embed-card-modal-title">${this.titleText}</div>

        <div class="embed-card-modal-content">
          <div class="embed-card-modal-content-text">
            ${this.descriptionText}
          </div>

          <input
            class="embed-card-modal-input link"
            tabindex="0"
            type="text"
            placeholder="Input in https://..."
            value=${this._linkInputValue}
            @input=${this._handleInput}
          />
        </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,
            confirm: true,
            disabled: !isValidUrl(this._linkInputValue),
        })}
            tabindex="0"
            @click=${this._onConfirm}
          >
            Confirm
          </div>
        </div>
      </div>
    </div>`;
    }
};
EmbedCardCreateModal.styles = embedCardModalStyles;
__decorate([
    property({ attribute: false })
], EmbedCardCreateModal.prototype, "host", void 0);
__decorate([
    property({ attribute: false })
], EmbedCardCreateModal.prototype, "titleText", void 0);
__decorate([
    property({ attribute: false })
], EmbedCardCreateModal.prototype, "descriptionText", void 0);
__decorate([
    property({ attribute: false })
], EmbedCardCreateModal.prototype, "createOptions", void 0);
__decorate([
    property({ attribute: false })
], EmbedCardCreateModal.prototype, "onConfirm", void 0);
__decorate([
    query('input')
], EmbedCardCreateModal.prototype, "input", void 0);
__decorate([
    state()
], EmbedCardCreateModal.prototype, "_linkInputValue", void 0);
EmbedCardCreateModal = __decorate([
    customElement('embed-card-create-modal')
], EmbedCardCreateModal);
export { EmbedCardCreateModal };
export async function toggleEmbedCardCreateModal(host, titleText, descriptionText, createOptions) {
    host.selection.clear();
    const embedCardCreateModal = new EmbedCardCreateModal();
    embedCardCreateModal.host = host;
    embedCardCreateModal.titleText = titleText;
    embedCardCreateModal.descriptionText = descriptionText;
    embedCardCreateModal.createOptions = createOptions;
    document.body.appendChild(embedCardCreateModal);
    return new Promise(resolve => {
        embedCardCreateModal.onConfirm = () => resolve();
    });
}
//# sourceMappingURL=embed-card-create-modal.js.map