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 { WithDisposable } from '@blockeditor/lit';
import {} from '@blockeditor/store';
import { html, LitElement } from 'lit';
import { customElement, property, query, state } from 'lit/decorators.js';
import { styleMap } from 'lit/directives/style-map.js';
import { cleanSpecifiedTail, createKeydownObserver, } from '../../../_common/components/utils.js';
import { getRichTextByModel } from '../../../_common/utils/query.js';
import {} from './config.js';
import { styles } from './styles.js';
let LinkedDocPopover = class LinkedDocPopover extends WithDisposable(LitElement) {
    get _flattenActionList() {
        return this._actionGroup
            .map(group => group.items.map(item => ({ ...item, groupName: group.name })))
            .flat();
    }
    _updateActionList() {
        this._actionGroup = this.options.getMenus({
            editorHost: this.editorHost,
            query: this._query,
            page: this._page,
            model: this.model,
            pageMetas: this._page.workspace.meta.pageMetas,
        });
    }
    get _page() {
        return this.model.page;
    }
    constructor(editorHost, model, abortController = new AbortController()) {
        super();
        this.editorHost = editorHost;
        this.model = model;
        this.abortController = abortController;
        this._position = null;
        this._query = '';
        this._activatedItemIndex = 0;
        this._actionGroup = [];
    }
    connectedCallback() {
        super.connectedCallback();
        const richText = getRichTextByModel(this.editorHost, this.model);
        assertExists(richText, 'RichText not found');
        // init
        this._updateActionList();
        this._disposables.add(this.model.page.workspace.slots.pagesUpdated.on(() => {
            this._updateActionList();
        }));
        this._disposables.addFromEvent(this, 'mousedown', e => {
            // Prevent input from losing focus
            e.preventDefault();
        });
        createKeydownObserver({
            target: richText,
            onUpdateQuery: str => {
                this._query = str;
                this._activatedItemIndex = 0;
                this._updateActionList();
            },
            abortController: this.abortController,
            onMove: step => {
                const itemLen = this._flattenActionList.length;
                this._activatedItemIndex =
                    (itemLen + this._activatedItemIndex + step) % itemLen;
                // Scroll to the active item
                const item = this._flattenActionList[this._activatedItemIndex];
                const shadowRoot = this.shadowRoot;
                if (!shadowRoot) {
                    console.warn('Failed to find the shadow root!', this);
                    return;
                }
                const ele = shadowRoot.querySelector(`icon-button[data-id="${item.key}"]`);
                if (!ele) {
                    console.warn('Failed to find the active item!', item);
                    return;
                }
                ele.scrollIntoView({
                    block: 'nearest',
                });
            },
            onConfirm: () => {
                this.abortController.abort();
                cleanSpecifiedTail(this.editorHost, this.model, this.triggerKey + this._query);
                this._flattenActionList[this._activatedItemIndex]
                    .action()
                    ?.catch(console.error);
            },
            onEsc: () => {
                this.abortController.abort();
            },
        });
    }
    updatePosition(position) {
        this._position = position;
    }
    render() {
        const MAX_HEIGHT = 396;
        const style = this._position
            ? styleMap({
                transform: `translate(${this._position.x}, ${this._position.y})`,
                maxHeight: `${Math.min(this._position.height, MAX_HEIGHT)}px`,
            })
            : styleMap({
                visibility: 'hidden',
            });
        // XXX This is a side effect
        let accIdx = 0;
        return html `<div
      class="linked-doc-popover blockeditor-overlay"
      style="${style}"
    >
      ${this._actionGroup
            .filter(group => group.items.length)
            .map((group, idx) => {
            return html `
            <div class="divider" ?hidden=${idx === 0}></div>
            <div class="group-title">${group.name}</div>
            <div class="group" style=${group.styles ?? ''}>
              ${group.items.map(({ key, name, icon, action }) => {
                accIdx++;
                const curIdx = accIdx - 1;
                return html `<icon-button
                  width="280px"
                  height="32px"
                  data-id=${key}
                  text=${name}
                  ?hover=${this._activatedItemIndex === curIdx}
                  @click=${() => {
                    this.abortController.abort();
                    cleanSpecifiedTail(this.editorHost, this.model, this.triggerKey + this._query);
                    action()?.catch(console.error);
                }}
                  @mousemove=${() => {
                    // Use `mousemove` instead of `mouseover` to avoid navigate conflict with keyboard
                    this._activatedItemIndex = curIdx;
                }}
                  >${icon}</icon-button
                >`;
            })}
            </div>
          `;
        })}
    </div>`;
    }
};
LinkedDocPopover.styles = styles;
__decorate([
    property({ attribute: false })
], LinkedDocPopover.prototype, "options", void 0);
__decorate([
    property({ attribute: false })
], LinkedDocPopover.prototype, "triggerKey", void 0);
__decorate([
    state()
], LinkedDocPopover.prototype, "_position", void 0);
__decorate([
    state()
], LinkedDocPopover.prototype, "_query", void 0);
__decorate([
    state()
], LinkedDocPopover.prototype, "_activatedItemIndex", void 0);
__decorate([
    query('.linked-doc-popover')
], LinkedDocPopover.prototype, "linkedDocElement", void 0);
LinkedDocPopover = __decorate([
    customElement('affine-linked-doc-popover')
], LinkedDocPopover);
export { LinkedDocPopover };
//# sourceMappingURL=linked-doc-popover.js.map