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 '../buttons/tool-icon-button.js';
import './component-toolbar-menu-divider.js';
import { WithDisposable } from '@blockeditor/lit';
import { css, html, LitElement, nothing } from 'lit';
import { customElement, property } from 'lit/decorators.js';
import { toast } from '../../../../_common/components/toast.js';
import { NoteIcon, RenameIcon, UngroupButtonIcon, } from '../../../../_common/icons/index.js';
import { deserializeXYWH, serializeXYWH, } from '../../../../surface-block/index.js';
import { DEFAULT_NOTE_HEIGHT } from '../../utils/consts.js';
import { mountGroupTitleEditor } from '../../utils/text.js';
let EdgelessChangeGroupButton = class EdgelessChangeGroupButton extends WithDisposable(LitElement) {
    _insertIntoPage() {
        if (!this.surface.page.root)
            return;
        const root = this.surface.page.root;
        const pageChildren = root.children;
        const last = pageChildren[pageChildren.length - 1];
        const referenceGroup = this.groups[0];
        let targetParent = last?.id;
        if (last?.flavour !== 'affine:note') {
            const targetXYWH = deserializeXYWH(referenceGroup.xywh);
            targetXYWH[1] = targetXYWH[1] + targetXYWH[3];
            targetXYWH[3] = DEFAULT_NOTE_HEIGHT;
            const newAddedNote = this.surface.page.addBlock('affine:note', {
                xywh: serializeXYWH(...targetXYWH),
            }, root.id);
            targetParent = newAddedNote;
        }
        this.surface.page.addBlock('affine:surface-ref', {
            reference: this.groups[0].id,
            refFlavour: 'group',
        }, targetParent);
        toast(this.surface.host, 'Group has been inserted into page');
    }
    render() {
        const { groups } = this;
        return html `
      ${groups.length === 1
            ? html ` <edgeless-tool-icon-button
              .tooltip=${'Insert into Page'}
              .tipPosition=${'bottom'}
              @click=${this._insertIntoPage}
            >
              ${NoteIcon}
              <span style="margin-left: 2px;">Insert into Page</span>
            </edgeless-tool-icon-button>
            <component-toolbar-menu-divider></component-toolbar-menu-divider>
            <edgeless-tool-icon-button
              class=${'edgeless-component-toolbar-group-rename-button'}
              @click=${() => mountGroupTitleEditor(groups[0], this.surface.edgeless)}
              .tooltip=${'Rename'}
              .tipPosition=${'bottom'}
            >
              ${RenameIcon}
            </edgeless-tool-icon-button>

            <component-toolbar-menu-divider
              style=${'margin: 0 8px'}
            ></component-toolbar-menu-divider>`
            : nothing}
      <edgeless-tool-icon-button
        class=${'edgeless-component-toolbar-ungroup-button'}
        @click=${() => {
            groups.forEach(group => this.surface.group.ungroup(group));
        }}
        .tooltip=${'Ungroup'}
        .tipPosition=${'bottom'}
      >
        ${UngroupButtonIcon}
      </edgeless-tool-icon-button>
    `;
    }
    connectedCallback() {
        super.connectedCallback();
        this.style.display = 'flex';
        this.style.alignItems = 'center';
        this.style.justifyContent = 'center';
    }
    createRenderRoot() {
        return this;
    }
};
EdgelessChangeGroupButton.styles = css `
    component-toolbar-menu-divider {
      height: 24px;
    }
  `;
__decorate([
    property({ attribute: false })
], EdgelessChangeGroupButton.prototype, "surface", void 0);
__decorate([
    property({ attribute: false })
], EdgelessChangeGroupButton.prototype, "groups", void 0);
EdgelessChangeGroupButton = __decorate([
    customElement('edgeless-change-group-button')
], EdgelessChangeGroupButton);
export { EdgelessChangeGroupButton };
//# sourceMappingURL=change-group-button.js.map