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 { WithDisposable } from '@blockeditor/lit';
import { css, html, LitElement, nothing } from 'lit';
import { customElement, property, state } from 'lit/decorators.js';
import { Bound } from '../../../../surface-block/index.js';
let EdgelessNavigatorBlackBackground = class EdgelessNavigatorBlackBackground extends WithDisposable(LitElement) {
    constructor() {
        super(...arguments);
        this.show = false;
        this._blackBackground = false;
    }
    get _service() {
        return this.edgeless.surface.service;
    }
    _tryLoadBlackBackground() {
        const value = this._service.editSession.getItem('presentBlackBackground');
        this._blackBackground = value ? value : true;
    }
    firstUpdated() {
        const { _disposables, edgeless } = this;
        _disposables.add(edgeless.slots.navigatorFrameChanged.on(frame => {
            this.frame = frame;
        }));
        _disposables.add(edgeless.slots.navigatorSettingUpdated.on(({ blackBackground }) => {
            if (blackBackground !== undefined) {
                this._service.editSession.setItem('presentBlackBackground', blackBackground);
                this._blackBackground = blackBackground;
                this.show =
                    blackBackground && edgeless.edgelessTool.type === 'frameNavigator';
            }
        }));
        _disposables.add(edgeless.slots.edgelessToolUpdated.on(tool => {
            if (tool.type !== 'frameNavigator') {
                this.show = false;
            }
            else {
                this.show = this._blackBackground;
            }
        }));
        _disposables.add(edgeless.slots.fullScrennToggled.on(() => setTimeout(() => {
            this.requestUpdate();
        }, 500) // wait for full screen animation
        ));
        this._tryLoadBlackBackground();
    }
    render() {
        const { edgeless, frame, show } = this;
        if (!show || !frame)
            return nothing;
        const bound = Bound.deserialize(frame.xywh);
        const zoom = edgeless.surface.viewport.zoom;
        const width = bound.w * zoom;
        const height = bound.h * zoom;
        const [x, y] = edgeless.surface.viewport.toViewCoord(bound.x, bound.y);
        return html ` <style>
        .edgeless-navigator-black-background {
          width: ${width}px;
          height: ${height}px;
          top: ${y}px;
          left: ${x}px;
        }
      </style>
      <div class="edgeless-navigator-black-background"></div>`;
    }
};
EdgelessNavigatorBlackBackground.styles = css `
    .edgeless-navigator-black-background {
      background-color: black;
      position: absolute;
      z-index: 1;
      background-color: transparent;
      box-shadow: 0 0 0 5000px black;
    }
  `;
__decorate([
    state()
], EdgelessNavigatorBlackBackground.prototype, "frame", void 0);
__decorate([
    state()
], EdgelessNavigatorBlackBackground.prototype, "show", void 0);
__decorate([
    property({ attribute: false })
], EdgelessNavigatorBlackBackground.prototype, "edgeless", void 0);
EdgelessNavigatorBlackBackground = __decorate([
    customElement('edgeless-navigator-black-background')
], EdgelessNavigatorBlackBackground);
export { EdgelessNavigatorBlackBackground };
//# sourceMappingURL=edgeless-navigator-black-background.js.map