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 './template-panel.js';
import { WithDisposable } from '@blockeditor/lit';
import { arrow, autoUpdate, computePosition, offset, shift, } from '@floating-ui/dom';
import { css, html, LitElement } from 'lit';
import { customElement, property } from 'lit/decorators.js';
import { once } from '../../../../../_common/utils/event.js';
import { renderIcon } from './icon.js';
let EdgelessTemplateButton = class EdgelessTemplateButton extends WithDisposable(LitElement) {
    constructor() {
        super(...arguments);
        this._openedPanel = null;
        this._cleanup = null;
    }
    _togglePanel() {
        if (this._openedPanel) {
            this._closePanel();
            return;
        }
        const panel = document.createElement('edgeless-templates-panel');
        panel.edgeless = this.edgeless;
        this._cleanup = once(panel, 'closepanel', () => {
            this._closePanel();
        });
        this._openedPanel = panel;
        this.renderRoot.appendChild(panel);
        requestAnimationFrame(() => {
            const arrowEl = panel.renderRoot.querySelector('.arrow');
            autoUpdate(this, panel, () => {
                computePosition(this, panel, {
                    placement: 'top',
                    middleware: [offset(20), arrow({ element: arrowEl }), shift()],
                })
                    .then(({ x, y, middlewareData }) => {
                    panel.style.left = `${x}px`;
                    panel.style.top = `${y}px`;
                    arrowEl.style.left = `${(middlewareData.arrow?.x ?? 0) - (middlewareData.shift?.x ?? 0)}px`;
                })
                    .catch(e => {
                    console.warn("Can't compute position", e);
                });
            });
        });
    }
    _closePanel() {
        if (this._openedPanel) {
            this._openedPanel.remove();
            this._openedPanel = null;
            this._cleanup?.();
            this._cleanup = null;
            this.requestUpdate();
        }
    }
    _renderIcon(expanded) {
        return html `<div class="icon">${renderIcon(expanded)}</div>`;
    }
    render() {
        const expanded = this._openedPanel !== null;
        return html `<edgeless-toolbar-button @click=${this._togglePanel}>
      ${this._renderIcon(expanded)}
    </edgeless-toolbar-button>`;
    }
};
EdgelessTemplateButton.styles = css `
    :host {
      position: relative;
    }

    edgeless-template-button {
      cursor: pointer;
    }

    .icon {
      width: 102px;
      height: 64px;
      overflow: hidden;
      position: relative;
      color: var(--affine-background-primary-color);
    }
  `;
__decorate([
    property({ attribute: false })
], EdgelessTemplateButton.prototype, "edgeless", void 0);
__decorate([
    property({ attribute: false })
], EdgelessTemplateButton.prototype, "setEdgelessTool", void 0);
EdgelessTemplateButton = __decorate([
    customElement('edgeless-template-button')
], EdgelessTemplateButton);
export { EdgelessTemplateButton };
//# sourceMappingURL=template-tool-button.js.map