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 { ShadowlessElement, WithDisposable } from '@blockeditor/lit';
import { html, nothing } from 'lit';
import { customElement, property, state } from 'lit/decorators.js';
import { repeat } from 'lit/directives/repeat.js';
import { styleMap } from 'lit/directives/style-map.js';
import { Bound } from '../../../../../surface-block/index.js';
import { EdgelessPortalBase } from '../edgeless-portal-base.js';
const FRAME_OFFSET = 8;
let EdgeelssFrameTitle = class EdgeelssFrameTitle extends WithDisposable(ShadowlessElement) {
    constructor() {
        super(...arguments);
        this.isInner = false;
        this._editing = false;
        this._isNavigator = false;
        this._updateElement = () => {
            this.requestUpdate();
        };
    }
    firstUpdated() {
        const { _disposables, edgeless } = this;
        const { surface } = edgeless;
        _disposables.add(surface.viewport.slots.viewportUpdated.on(() => {
            this.requestUpdate();
        }));
        _disposables.add(edgeless.slots.elementUpdated.on(({ id }) => {
            if (id === this.frame.id) {
                this.requestUpdate();
            }
        }));
        _disposables.add(edgeless.slots.elementRemoved.on(({ id }) => {
            if (id === this.frame.id) {
                this.remove();
            }
        }));
        _disposables.add(edgeless.selectionManager.slots.updated.on(() => {
            if (edgeless.selectionManager.selectedIds[0] === this.frame.id &&
                edgeless.selectionManager.editing) {
                this._editing = true;
            }
            else {
                this._editing = false;
            }
        }));
        surface.edgeless.slots.edgelessToolUpdated.on(tool => {
            this._isNavigator = tool.type === 'frameNavigator' ? true : false;
        });
        this.setAttribute('data-frame-title-id', this.frame.id);
        this.frame.title.yText.observe(this._updateElement);
        _disposables.add(() => {
            this.frame.title.yText.unobserve(this._updateElement);
        });
    }
    render() {
        const { edgeless, frame: model, _isNavigator } = this;
        const { surface } = edgeless;
        const { zoom } = surface.viewport;
        const bound = Bound.deserialize(model.xywh);
        this.isInner = surface.frame.frames.some(frame => {
            if (frame.id === model.id)
                return false;
            if (Bound.deserialize(frame.xywh).contains(bound)) {
                return true;
            }
            return false;
        });
        const [x, y] = surface.viewport.toViewCoord(bound.x, bound.y);
        const { isInner } = this;
        const text = model.title.toString();
        const top = (isInner ? FRAME_OFFSET : -(29 + FRAME_OFFSET)) + y;
        const left = (isInner ? FRAME_OFFSET : 0) + x;
        const maxWidth = isInner
            ? bound.w * zoom - FRAME_OFFSET / zoom
            : bound.w * zoom;
        const hidden = 32 / zoom > bound.h && isInner;
        return html `
      ${text && !_isNavigator && !this._editing
            ? html ` <div
            style=${styleMap({
                display: hidden ? 'none' : 'initial',
                position: 'absolute',
                zIndex: 1,
                left: '0px',
                top: '0px',
                transform: `translate(${left}px, ${top}px)`,
                borderRadius: '4px',
                width: 'fit-content',
                maxWidth: maxWidth + 'px',
                padding: '8px 10px',
                fontSize: '14px',
                background: isInner
                    ? 'var(--affine-white)'
                    : 'var(--affine-text-primary-color)',
                color: isInner
                    ? 'var(--affine-text-secondary-color)'
                    : 'var(--affine-white)',
                cursor: 'default',
                whiteSpace: 'nowrap',
                overflow: 'hidden',
                textOverflow: 'ellipsis',
                border: isInner ? '1px solid var(--affine-border-color)' : 'none',
            })}
            class="affine-frame-title"
          >
            ${text}
          </div>`
            : nothing}
    `;
    }
};
__decorate([
    state()
], EdgeelssFrameTitle.prototype, "_editing", void 0);
__decorate([
    state()
], EdgeelssFrameTitle.prototype, "_isNavigator", void 0);
__decorate([
    property({ attribute: false })
], EdgeelssFrameTitle.prototype, "frame", void 0);
__decorate([
    property({ attribute: false })
], EdgeelssFrameTitle.prototype, "edgeless", void 0);
EdgeelssFrameTitle = __decorate([
    customElement('edgeless-frame-title')
], EdgeelssFrameTitle);
export { EdgeelssFrameTitle };
let EdgelessBlockPortalFrame = class EdgelessBlockPortalFrame extends EdgelessPortalBase {
    render() {
        const { model, index } = this;
        const bound = Bound.deserialize(model.xywh);
        const style = styleMap({
            position: 'absolute',
            zIndex: `${index}`,
            left: `${bound.x}px`,
            top: `${bound.y}px`,
            transformOrigin: '0px 0px',
        });
        return html `
      <div class="edgeless-block-portal-frame" style=${style}>
        ${this.renderModel(model)}
      </div>
    `;
    }
};
EdgelessBlockPortalFrame = __decorate([
    customElement('edgeless-block-portal-frame')
], EdgelessBlockPortalFrame);
let EdgelessFramesContainer = class EdgelessFramesContainer extends WithDisposable(ShadowlessElement) {
    constructor() {
        super(...arguments);
        this.onlyTitle = false;
    }
    firstUpdated() {
        const { _disposables } = this;
        _disposables.add(this.edgeless.surface.page.slots.blockUpdated.on(({ flavour }) => {
            if (flavour === 'affine:frame') {
                this.requestUpdate();
            }
        }));
    }
    render() {
        return html `
      ${repeat(this.frames, frame => frame.id, (frame, index) => this.onlyTitle
            ? html `<edgeless-frame-title
                .frame=${frame}
                .edgeless=${this.edgeless}
              >
              </edgeless-frame-title>`
            : html `
                <edgeless-block-portal-frame
                  .index=${index}
                  .model=${frame}
                  .surface=${this.surface}
                  .edgeless=${this.edgeless}
                >
                </edgeless-block-portal-frame>
              `)}
    `;
    }
};
__decorate([
    property({ attribute: false })
], EdgelessFramesContainer.prototype, "surface", void 0);
__decorate([
    property({ attribute: false })
], EdgelessFramesContainer.prototype, "edgeless", void 0);
__decorate([
    property({ attribute: false })
], EdgelessFramesContainer.prototype, "frames", void 0);
__decorate([
    property({ attribute: false })
], EdgelessFramesContainer.prototype, "onlyTitle", void 0);
EdgelessFramesContainer = __decorate([
    customElement('edgeless-frames-container')
], EdgelessFramesContainer);
export { EdgelessFramesContainer };
//# sourceMappingURL=edgeless-frame.js.map