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 './frame-order-menu.js';
import '../../buttons/tool-icon-button.js';
import '../../../../../_common/components/toggle-switch.js';
import { WithDisposable } from '@blockeditor/lit';
import { css, html, LitElement } from 'lit';
import { customElement, property, query, state } from 'lit/decorators.js';
import { NavigatorSettingsIcon } from '../../../../../_common/icons/edgeless.js';
import { createButtonPopper } from '../../utils.js';
let EdgelessNavigatorSettingButton = class EdgelessNavigatorSettingButton extends WithDisposable(LitElement) {
    constructor() {
        super(...arguments);
        this.blackBackground = true;
        this.popperShow = false;
        this.setPopperShow = () => { };
        this.hideToolbar = false;
        this._navigatorSettingPopper = null;
        this._onBlackBackgroundChange = (checked) => {
            this.blackBackground = checked;
            this.edgeless.slots.navigatorSettingUpdated.emit({
                blackBackground: this.blackBackground,
            });
        };
    }
    get _service() {
        return this.edgeless.surface.service;
    }
    _tryRestoreSettings() {
        const blackBackground = this._service.editSession.getItem('presentBlackBackground');
        this.blackBackground = blackBackground ? blackBackground : true;
    }
    connectedCallback() {
        super.connectedCallback();
        this._tryRestoreSettings();
    }
    firstUpdated() {
        this._navigatorSettingPopper = createButtonPopper(this._navigatorSettingButton, this._navigatorSettingMenu, ({ display }) => this.setPopperShow(display === 'show'));
    }
    render() {
        return html `
      <edgeless-tool-icon-button
        class="navigator-setting-button"
        .tooltip=${this.popperShow ? '' : 'Settings'}
        @click=${() => {
            this._navigatorSettingPopper?.toggle();
        }}
      >
        ${NavigatorSettingsIcon}
      </edgeless-tool-icon-button>
      <div
        class="navigator-setting-menu"
        @click=${(e) => {
            e.stopPropagation();
        }}
      >
        <div class="item-container">
          <div class="text title">Playback Settings</div>
        </div>
        <div class="item-container">
          <div class="text">Dark background</div>
          <toggle-switch
            .on=${this.blackBackground}
            .onChange=${this._onBlackBackgroundChange}
          >
          </toggle-switch>
        </div>
        <div class="item-container">
          <div class="text">Hide toolbar</div>
          <toggle-switch
            .on=${this.hideToolbar}
            .onChange=${(checked) => {
            this.onHideToolbarChange && this.onHideToolbarChange(checked);
        }}
          >
          </toggle-switch>
        </div>
      </div>
    `;
    }
};
EdgelessNavigatorSettingButton.styles = css `
    .navigator-setting-menu {
      display: none;
      padding: 8px;
      border-radius: 8px;
      font-size: 12px;
      font-weight: 500;
      background-color: var(--affine-background-overlay-panel-color);
      box-shadow: var(--affine-menu-shadow);
      color: var(--affine-text-primary-color);
    }

    .navigator-setting-menu[data-show] {
      display: initial;
    }

    .item-container {
      padding: 0px 12px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      height: 28px;
      width: 204px;
    }

    .text {
      padding: 0px 4px;
    }

    .title {
      color: var(--affine-text-secondary-color);
    }
  `;
__decorate([
    state()
], EdgelessNavigatorSettingButton.prototype, "blackBackground", void 0);
__decorate([
    property({ attribute: false })
], EdgelessNavigatorSettingButton.prototype, "popperShow", void 0);
__decorate([
    property({ attribute: false })
], EdgelessNavigatorSettingButton.prototype, "setPopperShow", void 0);
__decorate([
    property({ attribute: false })
], EdgelessNavigatorSettingButton.prototype, "hideToolbar", void 0);
__decorate([
    property({ attribute: false })
], EdgelessNavigatorSettingButton.prototype, "onHideToolbarChange", void 0);
__decorate([
    property({ attribute: false })
], EdgelessNavigatorSettingButton.prototype, "edgeless", void 0);
__decorate([
    query('.navigator-setting-button')
], EdgelessNavigatorSettingButton.prototype, "_navigatorSettingButton", void 0);
__decorate([
    query('.navigator-setting-menu')
], EdgelessNavigatorSettingButton.prototype, "_navigatorSettingMenu", void 0);
EdgelessNavigatorSettingButton = __decorate([
    customElement('edgeless-navigator-setting-button')
], EdgelessNavigatorSettingButton);
export { EdgelessNavigatorSettingButton };
//# sourceMappingURL=navigator-setting-button.js.map