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 } from 'lit/decorators.js';
import { styleMap } from 'lit/directives/style-map.js';
import { Bound } from '../../../../surface-block/index.js';
let EdgelessGroupTitleEditor = class EdgelessGroupTitleEditor extends WithDisposable(ShadowlessElement) {
    get inlineEditor() {
        assertExists(this.richText.inlineEditor);
        return this.richText.inlineEditor;
    }
    get inlineEditorContainer() {
        return this.inlineEditor.rootElement;
    }
    async getUpdateComplete() {
        const result = await super.getUpdateComplete();
        await this.richText?.updateComplete;
        return result;
    }
    firstUpdated() {
        const dispatcher = this.edgeless.dispatcher;
        assertExists(dispatcher);
        this.updateComplete
            .then(() => {
            this.inlineEditor.selectAll();
            this.group.showTitle = false;
            this.inlineEditor.slots.renderComplete.on(() => {
                this.requestUpdate();
            });
            this.disposables.add(dispatcher.add('keyDown', ctx => {
                const state = ctx.get('keyboardState');
                if (state.raw.key === 'Enter' && !state.raw.isComposing) {
                    this._unmount();
                    return true;
                }
                requestAnimationFrame(() => {
                    this.requestUpdate();
                });
                return false;
            }));
            this.disposables.add(this.edgeless.slots.viewportUpdated.on(() => {
                this.requestUpdate();
            }));
            this.disposables.add(dispatcher.add('click', () => true));
            this.disposables.add(dispatcher.add('doubleClick', () => true));
            this.disposables.addFromEvent(this.inlineEditorContainer, 'blur', () => {
                this._unmount();
            });
        })
            .catch(console.error);
    }
    _unmount() {
        // dispose in advance to avoid execute `this.remove()` twice
        this.disposables.dispose();
        this.group.showTitle = true;
        this.edgeless.selectionManager.set({
            elements: [this.group.id],
            editing: false,
        });
        this.remove();
    }
    render() {
        const viewport = this.edgeless.surface.viewport;
        const bound = Bound.deserialize(this.group.xywh);
        const [x, y] = viewport.toViewCoord(bound.x, bound.y);
        const inlineEditorStyle = styleMap({
            transformOrigin: 'top left',
            borderRadius: '35px',
            width: 'fit-content',
            maxHeight: '30px',
            lineHeight: '20px',
            padding: '4px 10px',
            fontSize: '14px',
            position: 'absolute',
            left: x + 'px',
            top: y - 36 + 'px',
            minWidth: '8px',
            fontFamily: 'var(--affine-font-family)',
            color: 'var(--affine-text-primary-color)',
            background: 'var(--affine-white-10)',
            outline: 'none',
            zIndex: '1',
            border: `1px solid
        var(--affine-primary-color)`,
            boxShadow: 'var(--affine-active-shadow)',
        });
        return html `<rich-text
      .yText=${this.group.title}
      .enableFormat=${false}
      .enableAutoScrollHorizontally=${false}
      .enableAutoScrollVertically=${false}
      style=${inlineEditorStyle}
    ></rich-text>`;
    }
};
__decorate([
    query('rich-text')
], EdgelessGroupTitleEditor.prototype, "richText", void 0);
__decorate([
    property({ attribute: false })
], EdgelessGroupTitleEditor.prototype, "group", void 0);
__decorate([
    property({ attribute: false })
], EdgelessGroupTitleEditor.prototype, "edgeless", void 0);
EdgelessGroupTitleEditor = __decorate([
    customElement('edgeless-group-title-editor')
], EdgelessGroupTitleEditor);
export { EdgelessGroupTitleEditor };
//# sourceMappingURL=edgeless-group-title-editor.js.map