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/toolbar-button.js';
import './shape-menu.js';
import './shape-tool-element.js';
import { css, html } from 'lit';
import { customElement, state } from 'lit/decorators.js';
import { repeat } from 'lit/directives/repeat.js';
import { styleMap } from 'lit/directives/style-map.js';
import { diamondSvg, ellipseSvg, rectSvg, roundedSvg, triangleSvg, } from '../../../../../_common/icons/index.js';
import { DEFAULT_SHAPE_FILL_COLOR, DEFAULT_SHAPE_STROKE_COLOR, ShapeType, } from '../../../../../surface-block/elements/shape/consts.js';
import { ShapeStyle } from '../../../../../surface-block/index.js';
import { ShapeToolController } from '../../../controllers/tools/shape-tool.js';
import { getTooltipWithShortcut } from '../../utils.js';
import { createPopper } from '../common/create-popper.js';
import { EdgelessToolButton } from '../edgeless-toolbar-button.js';
const { Rect, Triangle, Ellipse, Diamond } = ShapeType;
const shapes = [
    { name: Rect, svg: rectSvg },
    { name: Triangle, svg: triangleSvg },
    { name: Ellipse, svg: ellipseSvg },
    { name: Diamond, svg: diamondSvg },
    { name: 'roundedRect', svg: roundedSvg },
];
let EdgelessShapeToolButton = class EdgelessShapeToolButton extends EdgelessToolButton {
    constructor() {
        super(...arguments);
        this.shapeStyle = ShapeStyle.Scribbled;
        this.shapeType = Rect;
        this.fillColor = DEFAULT_SHAPE_FILL_COLOR;
        this.strokeColor = DEFAULT_SHAPE_STROKE_COLOR;
        this.radius = 0;
        this.order = shapes.map((_, i) => i + 1);
        this._type = 'shape';
        this._states = [
            'shapeStyle',
            'shapeType',
            'fillColor',
            'strokeColor',
            'radius',
        ];
    }
    _toggleMenu() {
        if (this._menu) {
            this._disposeMenu();
            this.requestUpdate();
        }
        else {
            this.edgeless.tools.setEdgelessTool({
                type: this._type,
                shapeType: this.shapeType,
            });
            this._menu = createPopper('edgeless-shape-menu', this, {
                x: -240,
                y: -40,
            });
            this._menu.element.edgeless = this.edgeless;
            this.updateMenu();
            this._menu.element.onChange = (props) => {
                if (props.shapeType) {
                    this._activeShape(props.shapeType);
                }
                if (props.shapeType === 'rect') {
                    props.radius = 0;
                }
                else if (props.shapeType === 'roundedRect') {
                    props.shapeType = 'rect';
                    props.radius = 0.1;
                }
                this.surface.service.editSession.record(this._type, props);
            };
        }
    }
    connectedCallback() {
        super.connectedCallback();
        this.surface.service.editSession.slots.lastPropsUpdated.on(({ type, props }) => {
            if (type === 'shape' && props.shapeType) {
                let { shapeType } = props;
                if (shapeType === 'rect' && props.radius > 0) {
                    shapeType = 'roundedRect';
                }
                this._activeShape(shapeType);
            }
        });
    }
    initLastPropsSlot() {
        this._disposables.add(this.service.editSession.slots.lastPropsUpdated.on(({ type, props }) => {
            if (type === this._type) {
                this._states.forEach(_key => {
                    const key = _key;
                    if (key === 'rect' && props.radius > 0) {
                        return;
                    }
                    if (props[key] != undefined) {
                        Object.assign(this, { [key]: props[key] });
                    }
                });
            }
        }));
    }
    updated(changedProperties) {
        if (this._states.some(key => changedProperties.has(key))) {
            if (this._menu) {
                this.updateMenu();
                this.edgeless.slots.edgelessToolUpdated.emit({
                    type: this._type,
                    shapeType: this.shapeType,
                });
                const controller = this.edgeless.tools.currentController;
                if (controller instanceof ShapeToolController) {
                    controller.createOverlay();
                }
            }
        }
    }
    _activeShape(name) {
        const { order } = this;
        const index = shapes.findIndex(({ name: n }) => n === name);
        const prevOrder = order[index];
        const newOrder = order.map(o => o < prevOrder ? o + 1 : o === prevOrder ? 1 : o);
        this.order = newOrder;
    }
    render() {
        const { active } = this;
        return html `
      <edgeless-toolbar-button
        class="edgeless-shape-button"
        .tooltip=${this._menu ? '' : getTooltipWithShortcut('Shape', 'S')}
        .tooltipOffset=${5}
        .active=${active}
      >
        <div class="container-clip">
          <div
            class="shapes"
            style=${styleMap({ color: `var(${this.fillColor})` })}
          >
            ${repeat(shapes, (shape, index) => {
            return html `<edgeless-shape-tool-element
                .shape=${shape}
                .fillColor=${this.fillColor}
                .strokeColor=${this.strokeColor}
                .shapeStyle=${this.shapeStyle}
                .radius=${this.radius}
                .order=${this.order[index]}
                .getContainerRect=${() => this.getBoundingClientRect()}
                .handleClick=${() => this._toggleMenu()}
                .edgeless=${this.edgeless}
              ></edgeless-shape-tool-element>`;
        })}
          </div>
        </div>
      </edgeless-toolbar-button>
    `;
    }
};
EdgelessShapeToolButton.styles = css `
    .shape-button-group {
      display: block;
      position: relative;
      width: 72px;
      height: 48px;
    }

    edgeless-toolbar-button svg {
      transition: 0.3s ease-in-out;
    }

    edgeless-toolbar-button:hover svg {
      scale: 1.15;
    }

    edgeless-toolbar-button svg + svg {
      position: absolute;
      top: 6px;
      right: 4px;
    }

    :host {
      --width: 102px;
      --height: 64px;
      position: relative;
      width: var(--width);
      height: var(--height);
    }

    .container-clip {
      padding: 10000px 10000px 0;
      margin: -10000px -10000px 0;
      overflow: hidden;
      pointer-events: none;
    }

    .shapes {
      height: var(--height);
      width: var(--width);
      color: #9747ff;
      display: flex;
      justify-content: center;
      align-items: center;
      position: relative;
      pointer-events: auto;
    }
  `;
__decorate([
    state()
], EdgelessShapeToolButton.prototype, "shapeStyle", void 0);
__decorate([
    state()
], EdgelessShapeToolButton.prototype, "shapeType", void 0);
__decorate([
    state()
], EdgelessShapeToolButton.prototype, "fillColor", void 0);
__decorate([
    state()
], EdgelessShapeToolButton.prototype, "strokeColor", void 0);
__decorate([
    state()
], EdgelessShapeToolButton.prototype, "radius", void 0);
__decorate([
    state()
], EdgelessShapeToolButton.prototype, "order", void 0);
EdgelessShapeToolButton = __decorate([
    customElement('edgeless-shape-tool-button')
], EdgelessShapeToolButton);
export { EdgelessShapeToolButton };
//# sourceMappingURL=shape-tool-button.js.map