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 './frame-order-menu.js';
import '../../buttons/tool-icon-button.js';
import { WithDisposable } from '@blockeditor/lit';
import { css, html, LitElement } from 'lit';
import { customElement, property, query, state } from 'lit/decorators.js';
import { FrameOrderAdjustmentIcon } from '../../../../../_common/icons/index.js';
import { createButtonPopper } from '../../utils.js';
let EdgelessFrameOrderButton = class EdgelessFrameOrderButton extends WithDisposable(LitElement) {
    constructor() {
        super(...arguments);
        this._edgelessFrameOrderPopper = null;
        this._popperShow = false;
    }
    firstUpdated() {
        this._edgelessFrameOrderPopper = createButtonPopper(this._edgelessFrameOrderButton, this._edgelessFrameOrderMenu, ({ display }) => (this._popperShow = display === 'show'));
    }
    render() {
        const { readonly } = this.edgeless.page;
        return html `
      <style>
        .edgeless-frame-order-button svg {
          color: ${readonly ? 'var(--affine-text-disable-color)' : 'inherit'};
        }
      </style>
      <edgeless-tool-icon-button
        class="edgeless-frame-order-button"
        .tooltip=${this._popperShow ? '' : 'Frame Order'}
        @click=${() => {
            if (readonly)
                return;
            this._edgelessFrameOrderPopper?.toggle();
        }}
      >
        ${FrameOrderAdjustmentIcon}
      </edgeless-tool-icon-button>
      <edgeless-frame-order-menu
        .edgeless=${this.edgeless}
        .frames=${this.frames}
        .updateFrames=${this.updateFrames}
      >
      </edgeless-frame-order-menu>
    `;
    }
};
EdgelessFrameOrderButton.styles = css `
    edgeless-frame-order-menu {
      display: none;
    }

    edgeless-frame-order-menu[data-show] {
      display: initial;
    }
  `;
__decorate([
    property({ attribute: false })
], EdgelessFrameOrderButton.prototype, "edgeless", void 0);
__decorate([
    property({ attribute: false })
], EdgelessFrameOrderButton.prototype, "frames", void 0);
__decorate([
    property({ attribute: false })
], EdgelessFrameOrderButton.prototype, "updateFrames", void 0);
__decorate([
    query('.edgeless-frame-order-button')
], EdgelessFrameOrderButton.prototype, "_edgelessFrameOrderButton", void 0);
__decorate([
    query('edgeless-frame-order-menu')
], EdgelessFrameOrderButton.prototype, "_edgelessFrameOrderMenu", void 0);
__decorate([
    state()
], EdgelessFrameOrderButton.prototype, "_popperShow", void 0);
EdgelessFrameOrderButton = __decorate([
    customElement('edgeless-frame-order-button')
], EdgelessFrameOrderButton);
export { EdgelessFrameOrderButton };
//# sourceMappingURL=frame-order-button.js.map