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 './component-toolbar-menu-divider.js';
import { WithDisposable } from '@blockeditor/lit';
import { css, LitElement, nothing } from 'lit';
import { customElement, property, query, state } from 'lit/decorators.js';
import { html } from 'lit/static-html.js';
import { toast } from '../../../../_common/components/toast.js';
import { NoteIcon, RenameIcon } from '../../../../_common/icons/index.js';
import { deserializeXYWH, serializeXYWH, } from '../../../../surface-block/index.js';
import { DEFAULT_NOTE_HEIGHT } from '../../utils/consts.js';
import { mountFrameTitleEditor } from '../../utils/text.js';
import { ColorUnit } from '../panel/color-panel.js';
import { createButtonPopper } from '../utils.js';
const FRAME_BACKGROUND = [
    '--affine-tag-gray',
    '--affine-tag-red',
    '--affine-tag-orange',
    '--affine-tag-yellow',
    '--affine-tag-green',
    '--affine-tag-teal',
    '--affine-tag-blue',
    '--affine-tag-purple',
    '--affine-tag-pink',
    '--affine-palette-transparent',
];
let EdgelessChangeFrameButton = class EdgelessChangeFrameButton extends WithDisposable(LitElement) {
    constructor() {
        super(...arguments);
        this.frames = [];
        this._showPopper = false;
        this._frameBackground = null;
    }
    _setFrameBackground(color) {
        this.frames.forEach(frame => {
            this.surface.updateElement(frame.id, { background: color });
        });
    }
    _insertIntoPage() {
        if (!this.surface.page.root)
            return;
        const root = this.surface.page.root;
        const pageChildren = root.children;
        const last = pageChildren[pageChildren.length - 1];
        const referenceFrame = this.frames[0];
        let targetParent = last?.id;
        if (last?.flavour !== 'affine:note') {
            const targetXYWH = deserializeXYWH(referenceFrame.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.frames[0].id,
            refFlavour: 'affine:frame',
        }, targetParent);
        toast(this.surface.host, 'Frame has been inserted into page');
    }
    firstUpdated() {
        this._frameBackground = createButtonPopper(this._fillColorButton, this._fillColorMenu, ({ display }) => {
            this._showPopper = display === 'show';
        });
        this._disposables.add(this._frameBackground);
    }
    render() {
        const { frames } = this;
        const background = frames[0].background;
        return html `${frames.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
              .tooltip=${'Rename'}
              .tipPosition=${'bottom'}
              .iconContainerPadding=${0}
              @click=${() => mountFrameTitleEditor(this.frames[0], this.surface.edgeless)}
            >
              ${RenameIcon}
            </edgeless-tool-icon-button>
            <component-toolbar-menu-divider></component-toolbar-menu-divider>
          `
            : nothing}

      <edgeless-tool-icon-button
        class="fill-color-button"
        .tooltip=${this._showPopper ? '' : 'Background'}
        .tipPosition=${'bottom'}
        .active=${false}
        .iconContainerPadding=${2}
        @click=${() => this._frameBackground?.toggle()}
      >
        <div class="fill-color-container">${ColorUnit(background)}</div>
      </edgeless-tool-icon-button>
      <div class="color-panel-container fill-color">
        <edgeless-color-panel
          .value=${background}
          .options=${FRAME_BACKGROUND}
          @select=${(e) => this._setFrameBackground(e.detail)}
        >
        </edgeless-color-panel>
      </div> `;
    }
};
EdgelessChangeFrameButton.styles = css `
    :host {
      display: flex;
      align-items: center;
      justify-content: center;
      color: var(--affine-text-primary-color);
      stroke: none;
      fill: currentColor;
    }

    edgeless-color-panel {
      width: 168px;
    }

    .fill-color-container {
      display: flex;
      justify-content: center;
      align-items: center;
      width: 20px;
      height: 20px;
    }

    .color-panel-container,
    .image-background-container {
      display: none;
      justify-content: center;
      align-items: center;
      background: var(--affine-background-overlay-panel-color);
      box-shadow: var(--affine-shadow-2);
      border-radius: 8px;
    }

    .color-panel-container[data-show],
    .image-background-container[data-show] {
      display: flex;
    }
    component-toolbar-menu-divider {
      margin: 0 12px;
      height: 24px;
    }
  `;
__decorate([
    property({ attribute: false })
], EdgelessChangeFrameButton.prototype, "surface", void 0);
__decorate([
    property({ attribute: false })
], EdgelessChangeFrameButton.prototype, "frames", void 0);
__decorate([
    state()
], EdgelessChangeFrameButton.prototype, "_showPopper", void 0);
__decorate([
    query('.fill-color-button')
], EdgelessChangeFrameButton.prototype, "_fillColorButton", void 0);
__decorate([
    query('.color-panel-container.fill-color')
], EdgelessChangeFrameButton.prototype, "_fillColorMenu", void 0);
EdgelessChangeFrameButton = __decorate([
    customElement('edgeless-change-frame-button')
], EdgelessChangeFrameButton);
export { EdgelessChangeFrameButton };
//# sourceMappingURL=change-frame-button.js.map