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 '../../panel/one-row-color-panel.js';
import { WithDisposable } from '@blockeditor/lit';
import { css, html, LitElement, nothing } from 'lit';
import { customElement, property } from 'lit/decorators.js';
import { GeneralStyleIcon, ScribbledStyleIcon, } from '../../../../../_common/icons/index.js';
import { DEFAULT_SHAPE_FILL_COLOR } from '../../../../../surface-block/elements/shape/consts.js';
import { ShapeStyle } from '../../../../../surface-block/index.js';
import { LINE_COLOR_PREFIX, SHAPE_COLOR_PREFIX, SHAPE_SUBMENU_WIDTH, ShapeComponentConfig, } from './shape-menu-config.js';
let EdgelessShapeMenu = class EdgelessShapeMenu extends WithDisposable(LitElement) {
    constructor() {
        super(...arguments);
        this._setStrokeColor = (strokeColor) => {
            if (this.edgeless.edgelessTool.type !== 'shape')
                return;
            const { shapeStyle } = this;
            const props = { strokeColor };
            if (shapeStyle === ShapeStyle.General) {
                props.fillColor = strokeColor.replace(LINE_COLOR_PREFIX, SHAPE_COLOR_PREFIX);
            }
            this.onChange(props);
        };
        this._setShapeStyle = (shapeStyle) => {
            if (this.edgeless.edgelessTool.type !== 'shape')
                return;
            const { strokeColor } = this;
            let fillColor;
            if (shapeStyle === ShapeStyle.General) {
                fillColor = strokeColor.replace(LINE_COLOR_PREFIX, SHAPE_COLOR_PREFIX);
            }
            else {
                fillColor = DEFAULT_SHAPE_FILL_COLOR;
            }
            this.onChange({
                shapeStyle,
                fillColor,
            });
        };
    }
    render() {
        if (this.edgeless.edgelessTool.type !== 'shape')
            return nothing;
        const { radius, strokeColor, shapeStyle } = this;
        let { shapeType } = this;
        if (shapeType === 'rect' && radius > 0) {
            shapeType = 'roundedRect';
        }
        return html `
      <div class="shape-menu-container">
        <edgeless-slide-menu .menuWidth=${SHAPE_SUBMENU_WIDTH}>
          <div class="menu-content">
            <div class="shape-style-container">
              <edgeless-tool-icon-button
                .tooltip=${'General'}
                .iconContainerPadding=${2}
                .active=${shapeStyle === ShapeStyle.General}
                .activeMode=${'background'}
                @click=${() => {
            this._setShapeStyle(ShapeStyle.General);
        }}
              >
                ${GeneralStyleIcon}
              </edgeless-tool-icon-button>
              <edgeless-tool-icon-button
                .tooltip=${'Scribbled'}
                .iconContainerPadding=${2}
                .active=${shapeStyle === ShapeStyle.Scribbled}
                .activeMode=${'background'}
                @click=${() => {
            this._setShapeStyle(ShapeStyle.Scribbled);
        }}
              >
                ${ScribbledStyleIcon}
              </edgeless-tool-icon-button>
            </div>
            <menu-divider .vertical=${true}></menu-divider>
            <div class="shape-type-container">
              ${ShapeComponentConfig.map(({ name, generalIcon, scribbledIcon, tooltip }) => {
            return html `
                    <edgeless-tool-icon-button
                      .tooltip=${tooltip}
                      .active=${shapeType === name}
                      .activeMode=${'background'}
                      .iconContainerPadding=${2}
                      @click=${() => {
                this.onChange({ shapeType: name });
            }}
                    >
                      ${shapeStyle === ShapeStyle.General
                ? generalIcon
                : scribbledIcon}
                    </edgeless-tool-icon-button>
                  `;
        })}
            </div>
            <menu-divider .vertical=${true}></menu-divider>
            <edgeless-one-row-color-panel
              .value=${strokeColor}
              @select=${(e) => this._setStrokeColor(e.detail)}
            ></edgeless-one-row-color-panel>
          </div>
        </edgeless-slide-menu>
      </div>
    `;
    }
};
EdgelessShapeMenu.styles = css `
    :host {
      display: flex;
      position: absolute;
      z-index: -1;
    }
    .menu-content {
      display: flex;
      align-items: center;
    }
    .shape-type-container,
    .shape-style-container {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 14px;
    }
    .shape-type-container svg,
    .shape-style-container svg {
      fill: var(--affine-icon-color);
      stroke: none;
    }
    menu-divider {
      height: 24px;
      margin: 0 9px;
    }
  `;
__decorate([
    property({ attribute: false })
], EdgelessShapeMenu.prototype, "edgeless", void 0);
__decorate([
    property({ attribute: false })
], EdgelessShapeMenu.prototype, "shapeType", void 0);
__decorate([
    property({ attribute: false })
], EdgelessShapeMenu.prototype, "fillColor", void 0);
__decorate([
    property({ attribute: false })
], EdgelessShapeMenu.prototype, "shapeStyle", void 0);
__decorate([
    property({ attribute: false })
], EdgelessShapeMenu.prototype, "strokeColor", void 0);
__decorate([
    property({ attribute: false })
], EdgelessShapeMenu.prototype, "radius", void 0);
__decorate([
    property({ attribute: false })
], EdgelessShapeMenu.prototype, "onChange", void 0);
EdgelessShapeMenu = __decorate([
    customElement('edgeless-shape-menu')
], EdgelessShapeMenu);
export { EdgelessShapeMenu };
//# sourceMappingURL=shape-menu.js.map