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 '../buttons/toolbar-button.js';
import './shape/shape-tool-button.js';
import './brush/brush-tool-button.js';
import './connector/connector-tool-button.js';
import './note/note-tool-button.js';
import './frame/frame-order-button.js';
import './frame/frame-tool-button.js';
import './default/default-tool-button.js';
import './text/text-tool-button.js';
import './eraser/eraser-tool-button.js';
import './frame/navigator-setting-button.js';
import './template/template-tool-button.js';
import { WithDisposable } from '@blockeditor/lit';
import { baseTheme } from '@toeverything/theme';
import { css, html, LitElement, nothing, unsafeCSS, } from 'lit';
import { customElement, state } from 'lit/decorators.js';
import { toast } from '../../../../_common/components/toast.js';
import {} from '../../../../_common/edgeless/frame/consts.js';
import { EdgelessImageIcon, EdgelessTextIcon, FrameNavigatorIcon, FrameNavigatorNextIcon, FrameNavigatorPrevIcon, NavigatorExitFullScreenIcon, NavigatorFullScreenIcon, } from '../../../../_common/icons/index.js';
import { stopPropagation } from '../../../../_common/utils/event.js';
import { getImageFilesFromLocal } from '../../../../_common/utils/filesys.js';
import { Bound, clamp } from '../../../../surface-block/index.js';
import { isFrameBlock } from '../../utils/query.js';
import { launchIntoFullscreen } from '../utils.js';
let EdgelessToolbar = class EdgelessToolbar extends WithDisposable(LitElement) {
    get _service() {
        return this.edgeless.surface.service;
    }
    constructor(edgeless) {
        super();
        this._frames = [];
        this._navigatorMode = 'fit';
        this._hideToolbar = false;
        this._mouseOnToolbar = true;
        this.settingMenuShow = false;
        this._currentFrameIndex = 0;
        this._timer = null;
        this._cachedIndex = -1;
        this.setEdgelessTool = (edgelessTool) => {
            this.edgeless.tools.setEdgelessTool(edgelessTool);
        };
        this._imageLoading = false;
        this.edgeless = edgeless;
        this._frames = edgeless.surface.frame.frames.sort(edgeless.surface.compare);
    }
    get host() {
        return this.edgeless.host;
    }
    get edgelessTool() {
        return this.edgeless.edgelessTool;
    }
    async _addImages() {
        this._imageLoading = true;
        const imageFiles = await getImageFilesFromLocal();
        await this.edgeless.addImages(imageFiles);
        this._imageLoading = false;
    }
    _updateFrames() {
        this._frames = this.edgeless.surface.frame.frames.sort(this.edgeless.surface.compare);
    }
    _nextFrame() {
        const frames = this._frames;
        const min = 0;
        const max = frames.length - 1;
        if (this._currentFrameIndex === frames.length - 1) {
            toast(this.host, 'You have reached the last frame');
        }
        else {
            this._currentFrameIndex = clamp(this._currentFrameIndex + 1, min, max);
        }
    }
    _previousFrame() {
        const frames = this._frames;
        const min = 0;
        const max = frames.length - 1;
        if (this._currentFrameIndex === 0) {
            toast(this.host, 'You have reached the first frame');
        }
        else {
            this._currentFrameIndex = clamp(this._currentFrameIndex - 1, min, max);
        }
    }
    _canHideToolbar() {
        const { type } = this.edgelessTool;
        return (type === 'frameNavigator' &&
            this._hideToolbar &&
            !this._mouseOnToolbar &&
            !this.settingMenuShow);
    }
    _tryLoadNavigatorStateLocalRecord() {
        this._navigatorMode =
            this._service.editSession.getItem('presentFillScreen') === true
                ? 'fill'
                : 'fit';
    }
    firstUpdated() {
        const { _disposables, edgeless } = this;
        const { slots, page } = edgeless;
        this._hideToolbar =
            !!this._service.editSession.getItem('presentHideToolbar');
        edgeless.bindHotKey({
            ArrowLeft: () => {
                const { type } = this.edgelessTool;
                if (type !== 'frameNavigator')
                    return;
                this._previousFrame();
            },
            ArrowRight: () => {
                const { type } = this.edgelessTool;
                if (type !== 'frameNavigator')
                    return;
                this._nextFrame();
            },
        }, {
            global: true,
        });
        _disposables.add(slots.edgelessToolUpdated.on(tool => {
            if (tool.type === 'frameNavigator') {
                this._cachedIndex = this._currentFrameIndex;
                this._navigatorMode = tool.mode ?? this._navigatorMode;
                if (isFrameBlock(edgeless.selectionManager.elements[0])) {
                    this._cachedIndex = this._frames.findIndex(frame => frame.id === edgeless.selectionManager.elements[0].id);
                }
                if (this._frames.length === 0)
                    toast(this.host, 'The presentation requires at least 1 frame. You can firstly create a frame.', 5000);
                this._toggleFullScreen();
            }
            this.requestUpdate();
        }));
        _disposables.add(page.slots.blockUpdated.on(({ flavour, type }) => {
            if (flavour === 'affine:frame' && type !== 'update') {
                requestAnimationFrame(() => {
                    this._updateFrames();
                });
            }
        }));
        _disposables.add(page.slots.blockUpdated.on(e => {
            if (e.type === 'update') {
                this._updateFrames();
            }
        }));
        _disposables.add(page.slots.blockUpdated);
        _disposables.add(slots.viewportUpdated.on(() => this.requestUpdate()));
        _disposables.add(edgeless.slots.readonlyUpdated.on(() => {
            this.requestUpdate();
        }));
        _disposables.add(this.edgeless.slots.navigatorSettingUpdated.on(({ hideToolbar, fillScreen }) => {
            if (hideToolbar !== undefined && hideToolbar !== this._hideToolbar) {
                this._hideToolbar = hideToolbar;
            }
            if (fillScreen !== undefined) {
                this._navigatorMode = fillScreen ? 'fill' : 'fit';
            }
        }));
        this._tryLoadNavigatorStateLocalRecord();
    }
    _moveToCurrentFrame() {
        const current = this._currentFrameIndex;
        const viewport = this.edgeless.surface.viewport;
        const frame = this._frames[current];
        if (frame) {
            let bound = Bound.deserialize(frame.xywh);
            if (this._navigatorMode === 'fill') {
                const vb = viewport.viewportBounds;
                const center = bound.center;
                let w, h;
                if (vb.w / vb.h > bound.w / bound.h) {
                    w = bound.w;
                    h = (w * vb.h) / vb.w;
                }
                else {
                    h = bound.h;
                    w = (h * vb.w) / vb.h;
                }
                bound = Bound.fromCenter(center, w, h);
            }
            viewport.setViewportByBound(bound, [0, 0, 0, 0], false);
            this.edgeless.slots.navigatorFrameChanged.emit(this._frames[this._currentFrameIndex]);
        }
    }
    updated(changedProperties) {
        const { type } = this.edgelessTool;
        if (changedProperties.has('_currentFrameIndex') &&
            type === 'frameNavigator') {
            this._moveToCurrentFrame();
        }
        if (changedProperties.has('_hideToolbar')) {
            this.edgeless.slots.navigatorSettingUpdated.emit({
                hideToolbar: this._hideToolbar,
            });
            this._service.editSession.setItem('presentHideToolbar', this._hideToolbar);
        }
    }
    _toggleFullScreen() {
        if (document.fullscreenElement) {
            this._timer && clearTimeout(this._timer);
            document.exitFullscreen().catch(console.error);
        }
        else {
            launchIntoFullscreen(this.edgeless.viewportElement);
            this._timer = setTimeout(() => {
                this._currentFrameIndex = this._cachedIndex;
            }, 400);
        }
        setTimeout(() => this._moveToCurrentFrame(), 400);
        this.edgeless.slots.fullScrennToggled.emit();
    }
    get _FrameNavigator() {
        const current = this._currentFrameIndex;
        const frames = this._frames;
        const frame = frames[current];
        const { page } = this.edgeless;
        return html `
      <edgeless-tool-icon-button
        .tooltip=${'Previous'}
        @click=${() => this._previousFrame()}
      >
        ${FrameNavigatorPrevIcon}
      </edgeless-tool-icon-button>
      <div class="edgeless-frame-navigator">
        <span
          class="edgeless-frame-navigator-title"
          @click=${() => (this._currentFrameIndex = this._currentFrameIndex + 0)}
          >${frame?.title ?? 'no frame'}</span
        >
        <span class="edgeless-frame-navigator-count"
          >${frames.length === 0 ? 0 : current + 1}/${frames.length}</span
        >
      </div>
      <edgeless-tool-icon-button
        .tooltip=${'Next'}
        @click=${() => this._nextFrame()}
      >
        ${FrameNavigatorNextIcon}
      </edgeless-tool-icon-button>
      <div class="short-divider"></div>
      <edgeless-frame-order-button
        .frames=${this._frames}
        .updateFrames=${this._updateFrames.bind(this)}
        .edgeless=${this.edgeless}
      >
      </edgeless-frame-order-button>
      <edgeless-tool-icon-button
        .tooltip=${document.fullscreenElement
            ? 'Exit Full Screen'
            : 'Enter Full Screen'}
        @click=${() => {
            this._toggleFullScreen();
        }}
      >
        ${document.fullscreenElement
            ? NavigatorExitFullScreenIcon
            : NavigatorFullScreenIcon}
      </edgeless-tool-icon-button>
      <edgeless-navigator-setting-button
        .edgeless=${this.edgeless}
        .hideToolbar=${this._hideToolbar}
        .onHideToolbarChange=${(hideToolbar) => {
            this._hideToolbar = hideToolbar;
        }}
        .popperShow=${this.settingMenuShow}
        .setPopperShow=${(show) => {
            this.settingMenuShow = show;
        }}
      >
      </edgeless-navigator-setting-button>
      <div class="short-divider"></div>
      <div
        class="edgeless-frame-navigator-stop"
        @click=${() => {
            this.setEdgelessTool(page.readonly
                ? { type: 'pan', panning: false }
                : { type: 'default' });
            document.fullscreenElement && this._toggleFullScreen();
            setTimeout(() => this._moveToCurrentFrame(), 400);
        }}
      >
        Stop
      </div>
    `;
    }
    _Tools() {
        const { edgelessTool } = this.edgeless;
        const { type } = edgelessTool;
        return html `
      <div class="full-divider"></div>
      <div class="brush-and-eraser">
        <edgeless-brush-tool-button
          .edgeless=${this.edgeless}
          .active=${type === 'brush'}
        ></edgeless-brush-tool-button>
        <edgeless-eraser-tool-button
          .edgelessTool=${this.edgelessTool}
          .edgeless=${this.edgeless}
          .setEdgelessTool=${this.setEdgelessTool}
        ></edgeless-eraser-tool-button>
      </div>
      <div class="edgeless-toolbar-right-part">
        <edgeless-shape-tool-button
          .edgeless=${this.edgeless}
          .active=${type === 'shape'}
        ></edgeless-shape-tool-button>
        <edgeless-text-tool-button
          .edgeless=${this.edgeless}
          .active=${type === 'text'}
        >
          ${EdgelessTextIcon}
        </edgeless-text-tool-button>
        <edgeless-toolbar-button
          class="transform-button"
          .disabled=${this._imageLoading}
          .activeMode=${'background'}
          .tooltip=${'Image'}
          .tooltipOffset=${12}
          @click=${() => this._addImages()}
        >
          ${EdgelessImageIcon}
        </edgeless-toolbar-button>
        <edgeless-template-button .edgeless=${this.edgeless}>
        </edgeless-template-button>
      </div>
    `;
    }
    get _DefaultContent() {
        const { page, edgelessTool } = this.edgeless;
        const { type } = edgelessTool;
        return html `<div class="edgeless-toolbar-left-part">
        <edgeless-default-tool-button
          .edgelessTool=${this.edgelessTool}
          .edgeless=${this.edgeless}
          .setEdgelessTool=${this.setEdgelessTool}
        ></edgeless-default-tool-button>

        <edgeless-connector-tool-button
          .edgeless=${this.edgeless}
          .active=${type === 'connector'}
        ></edgeless-connector-tool-button>

        ${page.readonly
            ? nothing
            : html ` <edgeless-frame-tool-button
              .edgelessTool=${this.edgelessTool}
              .setEdgelessTool=${this.setEdgelessTool}
              .edgeless=${this.edgeless}
            ></edgeless-frame-tool-button>`}

        <edgeless-tool-icon-button
          .tooltip=${'Present'}
          .tooltipOffset=${17}
          .iconContainerPadding=${8}
          @click=${() => {
            this.setEdgelessTool({
                type: 'frameNavigator',
                mode: this._navigatorMode,
            });
        }}
        >
          ${FrameNavigatorIcon}
        </edgeless-tool-icon-button>
      </div>

      ${page.readonly
            ? nothing
            : html `
            <div class="short-divider"></div>
            <edgeless-note-tool-button
              .edgeless=${this.edgeless}
              .active=${type === 'affine:note'}
            ></edgeless-note-tool-button>
          `}
      ${this._Tools()} `;
    }
    render() {
        const { type } = this.edgelessTool;
        if (this.edgeless.page.readonly && type !== 'frameNavigator') {
            return nothing;
        }
        const Content = type === 'frameNavigator' ? this._FrameNavigator : this._DefaultContent;
        return html `
      <style>
        .edgeless-toolbar-container {
          top: ${this._canHideToolbar() ? '100px' : '0px'};
        }
      </style>
      ${this.edgeless.edgelessTool.type === 'frameNavigator' &&
            this._hideToolbar &&
            !this._mouseOnToolbar
            ? html `<div
            class="edgeless-toolbar-container-placeholder"
            @mouseenter=${() => (this._mouseOnToolbar = true)}
          ></div>`
            : nothing}
      <div
        class="edgeless-toolbar-container"
        @dblclick=${stopPropagation}
        @mousedown=${stopPropagation}
        @pointerdown=${stopPropagation}
        @mouseenter=${() => (this._mouseOnToolbar = true)}
        @mouseleave=${() => (this._mouseOnToolbar = false)}
      >
        ${Content}
      </div>
    `;
    }
};
EdgelessToolbar.styles = css `
    :host {
      user-select: none;
      font-family: ${unsafeCSS(baseTheme.fontSansFamily)};
      position: absolute;
      z-index: 1;
      left: calc(50%);
      transform: translateX(-50%);
      bottom: 28px;
    }

    .edgeless-toolbar-container-placeholder {
      position: absolute;
      width: 463px;
      height: 66px;
      border-radius: 40px;
      background-color: transparent;
    }

    .edgeless-toolbar-container {
      position: relative;
      display: flex;
      align-items: center;
      flex-direction: row;
      padding: 0 20px;
      background: var(--affine-background-overlay-panel-color);
      box-shadow: var(--affine-shadow-2);
      border: 1px solid var(--affine-border-color);
      border-radius: 40px;
      height: 64px;
      transition: 0.5s ease-in-out;
    }
    .edgeless-toolbar-container[level='second'] {
      position: absolute;
      bottom: 8px;
      transform: translateY(-100%);
    }
    .edgeless-toolbar-container[hidden] {
      display: none;
    }
    .edgeless-toolbar-left-part {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
    }
    .short-divider {
      width: 1px;
      height: 24px;
      margin: 0 10px;
      background-color: var(--affine-border-color);
    }
    .full-divider {
      width: 1px;
      height: 100%;
      margin: 0 12px;
      background-color: var(--affine-border-color);
    }
    .brush-and-eraser {
      display: flex;
      margin-left: 8px;
    }
    .edgeless-toolbar-right-part {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 10px;
      margin-left: 12px;
    }
    .transform-button svg {
      transition: 0.3s ease-in-out;
    }
    .transform-button:hover svg {
      transform: scale(1.15);
    }

    .edgeless-frame-navigator {
      width: 145px;
      text-align: center;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .edgeless-frame-navigator-title {
      display: inline-block;
      cursor: pointer;
      color: #424149;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
      margin-right: 8px;
    }

    .edgeless-frame-navigator-count {
      color: #8e8d91;
    }
    .edgeless-frame-navigator-stop {
      background: #eb4335;
      color: #ffffff;
      box-shadow: 0px 1px 2px 0px #ffffff40 inset;
      padding: 4px 10px;
      border-radius: 8px;
      cursor: pointer;
    }
  `;
__decorate([
    state()
], EdgelessToolbar.prototype, "_frames", void 0);
__decorate([
    state()
], EdgelessToolbar.prototype, "_navigatorMode", void 0);
__decorate([
    state()
], EdgelessToolbar.prototype, "_hideToolbar", void 0);
__decorate([
    state()
], EdgelessToolbar.prototype, "_mouseOnToolbar", void 0);
__decorate([
    state()
], EdgelessToolbar.prototype, "settingMenuShow", void 0);
__decorate([
    state({
        hasChanged() {
            return true;
        },
    })
], EdgelessToolbar.prototype, "_currentFrameIndex", void 0);
EdgelessToolbar = __decorate([
    customElement('edgeless-toolbar')
], EdgelessToolbar);
export { EdgelessToolbar };
//# sourceMappingURL=edgeless-toolbar.js.map