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 } from 'lit';
import { customElement, property, query } from 'lit/decorators.js';
import { styleMap } from 'lit/directives/style-map.js';
import { ArrowUpIcon, HandIcon, SelectIcon, } from '../../../../../_common/icons/index.js';
import {} from '../../../../../_common/utils/index.js';
import { getTooltipWithShortcut } from '../../utils.js';
let EdgelessDefaultToolButton = class EdgelessDefaultToolButton extends WithDisposable(LitElement) {
    connectedCallback() {
        super.connectedCallback();
        if (!localStorage.defaultTool) {
            localStorage.defaultTool = 'default';
        }
        this.edgeless.slots.edgelessToolUpdated.on(({ type }) => {
            if (type === 'default' || type === 'pan') {
                localStorage.defaultTool = type;
            }
        });
    }
    _fadeOut() {
        this.currentIcon.style.opacity = '0';
        this.currentIcon.style.transform = `translateY(-5px)`;
    }
    _fadeIn() {
        this.currentIcon.style.opacity = '1';
        this.currentIcon.style.transform = `translateY(0px)`;
    }
    _changeTool() {
        const type = this.edgelessTool?.type;
        if (type !== 'default' && type !== 'pan') {
            if (localStorage.defaultTool === 'default') {
                this.setEdgelessTool({ type: 'default' });
            }
            else if (localStorage.defaultTool === 'pan') {
                this.setEdgelessTool({ type: 'pan', panning: false });
            }
            return;
        }
        this._fadeOut();
        // wait for animation to finish
        setTimeout(() => {
            if (type === 'default') {
                this.currentIcon;
                this.setEdgelessTool({ type: 'pan', panning: false });
            }
            else if (type === 'pan') {
                this.setEdgelessTool({ type: 'default' });
            }
            this._fadeIn();
        }, 100);
    }
    render() {
        const type = this.edgelessTool?.type;
        const arrowColor = type === 'default' || type === 'pan' ? 'currentColor' : '#77757D';
        return html `
      <edgeless-tool-icon-button
        class="edgeless-default-button ${type}"
        .tooltip=${type === 'pan'
            ? getTooltipWithShortcut('Hand', 'H')
            : getTooltipWithShortcut('Select', 'V')}
        .tooltipOffset=${17}
        .active=${type === 'default' || type === 'pan'}
        .iconContainerPadding=${8}
        @click=${this._changeTool}
      >
        <span class="current-icon">
          ${localStorage.defaultTool === 'default' ? SelectIcon : HandIcon}
        </span>
        <span class="arrow-up-icon" style=${styleMap({ color: arrowColor })}>
          ${ArrowUpIcon}
        </span>
      </edgeless-tool-icon-button>
    `;
    }
};
EdgelessDefaultToolButton.styles = css `
    .current-icon {
      transition: 100ms;
    }
    .arrow-up-icon {
      position: absolute;
      top: 4px;
      right: 2px;
      font-size: 0;
    }
  `;
__decorate([
    property({ attribute: false })
], EdgelessDefaultToolButton.prototype, "edgelessTool", void 0);
__decorate([
    property({ attribute: false })
], EdgelessDefaultToolButton.prototype, "edgeless", void 0);
__decorate([
    property({ attribute: false })
], EdgelessDefaultToolButton.prototype, "setEdgelessTool", void 0);
__decorate([
    query('.current-icon')
], EdgelessDefaultToolButton.prototype, "currentIcon", void 0);
EdgelessDefaultToolButton = __decorate([
    customElement('edgeless-default-tool-button')
], EdgelessDefaultToolButton);
export { EdgelessDefaultToolButton };
//# sourceMappingURL=default-tool-button.js.map