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 '../_common/components/embed-card/embed-card-caption.js';
import '../_common/components/embed-card/embed-card-toolbar';
import { ShadowlessElement, WithDisposable } from '@blockeditor/lit';
import { flip, offset } from '@floating-ui/dom';
import { html, nothing } from 'lit';
import { customElement, property, query } from 'lit/decorators.js';
import { ref } from 'lit/directives/ref.js';
import { styleMap } from 'lit/directives/style-map.js';
import { HoverController } from '../_common/components/hover/controller.js';
let DocBookmarkBlockComponent = class DocBookmarkBlockComponent extends WithDisposable(ShadowlessElement) {
    constructor() {
        super(...arguments);
        this._whenHover = new HoverController(this, ({ abortController }) => {
            return {
                template: html `
        <style>
          :host {
            z-index: 1;
          }
        </style>
        <embed-card-toolbar
          .model=${this.model}
          .block=${this.block}
          .host=${this.host}
          .abortController=${abortController}
          .std=${this.block.std}
        ></embed-card-toolbar>
      `,
                computePosition: {
                    referenceElement: this.bookmardCardElement,
                    placement: 'top-end',
                    middleware: [flip(), offset(4)],
                    autoUpdate: true,
                },
            };
        });
    }
    get model() {
        return this.block.model;
    }
    get host() {
        return this.block.host;
    }
    connectedCallback() {
        super.connectedCallback();
        this.disposables.add(this.host.selection.slots.changed.on(() => this.requestUpdate()));
    }
    render() {
        return html `
      <div
        ${ref(this._whenHover.setReference)}
        style=${styleMap({
            width: '100%',
            margin: '18px 0',
            position: 'relative',
        })}
      >
        <bookmark-card .bookmark=${this.block}></bookmark-card>
        <embed-card-caption
          .block=${this.block}
          .display=${this.block.showCaption}
          @blur=${() => {
            if (!this.model.caption)
                this.block.showCaption = false;
        }}
        ></embed-card-caption>
        ${this.block.selected?.is('block')
            ? html `<affine-block-selection></affine-block-selection>`
            : nothing}
      </div>
    `;
    }
};
__decorate([
    property({ attribute: false })
], DocBookmarkBlockComponent.prototype, "block", void 0);
__decorate([
    query('.affine-bookmark-card')
], DocBookmarkBlockComponent.prototype, "bookmardCardElement", void 0);
DocBookmarkBlockComponent = __decorate([
    customElement('affine-doc-bookmark')
], DocBookmarkBlockComponent);
export { DocBookmarkBlockComponent };
//# sourceMappingURL=doc-bookmark-block.js.map