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/color-panel.js';
import '../panel/line-width-panel.js';
import { WithDisposable } from '@blockeditor/lit';
import { css, html, LitElement } from 'lit';
import { customElement, property, query, state } from 'lit/decorators.js';
import { styleMap } from 'lit/directives/style-map.js';
import { LineWidth } from '../../../../_common/types.js';
import { countBy, maxBy } from '../../../../_common/utils/iterable.js';
import { GET_DEFAULT_LINE_COLOR, } from '../panel/color-panel.js';
import { createButtonPopper } from '../utils.js';
function getMostCommonColor(elements) {
    const shapeTypes = countBy(elements, (ele) => ele.color);
    const max = maxBy(Object.entries(shapeTypes), ([_k, count]) => count);
    return max ? max[0] : GET_DEFAULT_LINE_COLOR();
}
function getMostCommonSize(elements) {
    const shapeTypes = countBy(elements, (ele) => ele.lineWidth);
    const max = maxBy(Object.entries(shapeTypes), ([_k, count]) => count);
    return max ? Number(max[0]) : LineWidth.LINE_WIDTH_FOUR;
}
let EdgelessChangeBrushButton = class EdgelessChangeBrushButton extends WithDisposable(LitElement) {
    constructor() {
        super(...arguments);
        this.elements = [];
        this._showPopper = false;
        this._selectedColor = null;
        this._selectedSize = LineWidth.LINE_WIDTH_FOUR;
        this._colorPanelPopper = null;
    }
    _setLineWidth(size) {
        this.page.captureSync();
        this.elements.forEach(element => {
            if (element.lineWidth !== size) {
                this.surface.updateElement(element.id, {
                    lineWidth: size,
                });
            }
        });
    }
    _setBrushColor(color) {
        this.page.captureSync();
        this.elements.forEach(element => {
            if (element.color !== color) {
                this.surface.updateElement(element.id, {
                    color,
                });
            }
        });
        if (color && this._selectedColor !== color) {
            this._selectedColor = color;
        }
    }
    firstUpdated(changedProperties) {
        const _disposables = this._disposables;
        this._colorPanelPopper = createButtonPopper(this, this._colorPanel, ({ display }) => {
            this._showPopper = display === 'show';
        });
        _disposables.add(this._colorPanelPopper);
        super.firstUpdated(changedProperties);
    }
    render() {
        this._selectedColor = getMostCommonColor(this.elements);
        const style = {
            backgroundColor: `var(${this._selectedColor})`,
        };
        this._selectedSize = getMostCommonSize(this.elements);
        return html `
      <edgeless-line-width-panel
        .selectedSize=${this._selectedSize}
        @select=${(e) => this._setLineWidth(e.detail)}
      >
      </edgeless-line-width-panel>
      <menu-divider .vertical=${true}></menu-divider>
      <edgeless-tool-icon-button
        .tooltip=${this._showPopper ? '' : 'Color'}
        .active=${false}
        .iconContainerPadding=${2}
        @click=${() => this._colorPanelPopper?.toggle()}
      >
        <div class="brush-color-button">
          <div style=${styleMap(style)}></div>
        </div>
      </edgeless-tool-icon-button>
      <div class="color-panel-container">
        <edgeless-color-panel
          .value=${this._selectedColor}
          @select=${(e) => this._setBrushColor(e.detail)}
        >
        </edgeless-color-panel>
      </div>
    `;
    }
};
EdgelessChangeBrushButton.styles = css `
    :host {
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: center;
      color: var(--affine-text-primary-color);
      fill: currentColor;
    }

    menu-divider {
      height: 24px;
      margin: 0 5px;
    }

    .color-panel-container {
      display: none;
      justify-content: center;
      align-items: center;
      background: var(--affine-background-overlay-panel-color);
      box-shadow: var(--affine-shadow-2);
      border-radius: 8px;
    }

    .color-panel-container[data-show] {
      display: flex;
    }

    .brush-size-button,
    .brush-color-button {
      display: flex;
      justify-content: center;
      align-items: center;
      width: 24px;
      height: 24px;
      box-sizing: border-box;
      border-radius: 4px;
      cursor: pointer;
    }

    .brush-size-button div,
    .brush-color-button div {
      border-radius: 50%;
      background-color: var(--affine-icon-color);
    }

    .brush-color-button div {
      width: 16px;
      height: 16px;
    }
  `;
__decorate([
    property({ attribute: false })
], EdgelessChangeBrushButton.prototype, "elements", void 0);
__decorate([
    property({ attribute: false })
], EdgelessChangeBrushButton.prototype, "page", void 0);
__decorate([
    property({ attribute: false })
], EdgelessChangeBrushButton.prototype, "surface", void 0);
__decorate([
    state()
], EdgelessChangeBrushButton.prototype, "_showPopper", void 0);
__decorate([
    state()
], EdgelessChangeBrushButton.prototype, "_selectedColor", void 0);
__decorate([
    state()
], EdgelessChangeBrushButton.prototype, "_selectedSize", void 0);
__decorate([
    query('.color-panel-container')
], EdgelessChangeBrushButton.prototype, "_colorPanel", void 0);
EdgelessChangeBrushButton = __decorate([
    customElement('edgeless-change-brush-button')
], EdgelessChangeBrushButton);
export { EdgelessChangeBrushButton };
//# sourceMappingURL=change-brush-button.js.map