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 '../buttons/menu-button.js';
import { WithDisposable } from '@blockeditor/lit';
import { css, html, LitElement } from 'lit';
import { customElement, property } from 'lit/decorators.js';
import { styleMap } from 'lit/directives/style-map.js';
import { ConnectorEndpointNoneIcon, CurveLineIcon, DashLineIcon, ElbowedLineIcon, FlipDirectionIcon, FrontEndpointArrowIcon, FrontEndpointCircleIcon, FrontEndpointDiamondIcon, FrontEndpointTriangleIcon, GeneralStyleIcon, LineStyleIcon, RearEndpointArrowIcon, RearEndpointCircleIcon, RearEndpointDiamondIcon, RearEndpointTriangleIcon, ScribbledStyleIcon, SmallArrowDownIcon, StraightLineIcon, } from '../../../../_common/icons/index.js';
import { LineWidth } from '../../../../_common/types.js';
import { countBy, maxBy } from '../../../../_common/utils/iterable.js';
import { ConnectorEndpoint, ConnectorEndpointStyle, ConnectorMode, DEFAULT_FRONT_END_POINT_STYLE, DEFAULT_REAR_END_POINT_STYLE, StrokeStyle, } from '../../../../surface-block/index.js';
import { ColorUnit, GET_DEFAULT_LINE_COLOR, } from '../panel/color-panel.js';
function getMostCommonColor(elements) {
    const colors = countBy(elements, (ele) => ele.stroke);
    const max = maxBy(Object.entries(colors), ([_k, count]) => count);
    return max ? max[0] : GET_DEFAULT_LINE_COLOR();
}
function getMostCommonMode(elements) {
    const modes = countBy(elements, (ele) => ele.mode);
    const max = maxBy(Object.entries(modes), ([_k, count]) => count);
    return max ? Number(max[0]) : null;
}
function getMostCommonLineWidth(elements) {
    const sizes = countBy(elements, (ele) => {
        return ele.strokeWidth;
    });
    const max = maxBy(Object.entries(sizes), ([_k, count]) => count);
    return max ? Number(max[0]) : LineWidth.LINE_WIDTH_FOUR;
}
export function getMostCommonLineStyle(elements) {
    const sizes = countBy(elements, (ele) => {
        switch (ele.strokeStyle) {
            case StrokeStyle.Solid: {
                return 'solid';
            }
            case StrokeStyle.Dashed: {
                return 'dash';
            }
            case StrokeStyle.None: {
                return 'none';
            }
        }
    });
    const max = maxBy(Object.entries(sizes), ([_k, count]) => count);
    return max ? max[0] : null;
}
function getMostCommonRough(elements) {
    const { trueCount, falseCount } = elements.reduce((counts, ele) => {
        if (ele.rough) {
            counts.trueCount++;
        }
        else {
            counts.falseCount++;
        }
        return counts;
    }, { trueCount: 0, falseCount: 0 });
    return trueCount > falseCount;
}
function getMostCommonEndpointStyle(elements, end) {
    const modes = countBy(elements, (ele) => end === ConnectorEndpoint.Front
        ? ele.frontEndpointStyle
        : ele.rearEndpointStyle);
    const max = maxBy(Object.entries(modes), ([_k, count]) => count);
    return max ? max[0] : null;
}
let EdgelessChangeConnectorButton = class EdgelessChangeConnectorButton extends WithDisposable(LitElement) {
    constructor() {
        super(...arguments);
        this.elements = [];
    }
    _setConnectorMode(mode) {
        this.page.captureSync();
        this.elements.forEach(element => {
            if (element.mode !== mode) {
                this.surface.updateElement(element.id, {
                    mode,
                });
            }
        });
    }
    _setConnectorRough(rough) {
        this.page.captureSync();
        this.elements.forEach(element => {
            if (element.rough !== rough) {
                this.surface.updateElement(element.id, {
                    rough,
                });
            }
        });
    }
    _setConnectorColor(stroke) {
        this.page.captureSync();
        let shouldUpdate = false;
        this.elements.forEach(element => {
            if (element.stroke !== stroke) {
                shouldUpdate = true;
                this.surface.updateElement(element.id, {
                    stroke,
                });
            }
        });
        if (shouldUpdate)
            this.requestUpdate();
    }
    _setConnectorStrokeWidth(strokeWidth) {
        this.elements.forEach(ele => {
            this.surface.updateElement(ele.id, {
                strokeWidth,
            });
        });
    }
    _setConnectorStrokeStyle(strokeStyle) {
        this.elements.forEach(ele => {
            this.surface.updateElement(ele.id, {
                strokeStyle,
            });
        });
    }
    _setConnectorEndpointStyle(end, style) {
        this.elements.forEach(ele => {
            if (end === ConnectorEndpoint.Front) {
                this.surface.updateElement(ele.id, {
                    frontEndpointStyle: style,
                });
            }
            else {
                this.surface.updateElement(ele.id, {
                    rearEndpointStyle: style,
                });
            }
        });
    }
    _flipEndpointStyle(frontEndpointStyle, rearEndpointStyle) {
        if (frontEndpointStyle === rearEndpointStyle)
            return;
        this.elements.forEach(ele => {
            this.surface.updateElement(ele.id, {
                frontEndpointStyle: rearEndpointStyle,
                rearEndpointStyle: frontEndpointStyle,
            });
        });
    }
    _getEndpointIcon(end, style) {
        switch (style) {
            case ConnectorEndpointStyle.None: {
                return ConnectorEndpointNoneIcon;
            }
            case ConnectorEndpointStyle.Arrow: {
                return end === ConnectorEndpoint.Front
                    ? FrontEndpointArrowIcon
                    : RearEndpointArrowIcon;
            }
            case ConnectorEndpointStyle.Triangle: {
                return end === ConnectorEndpoint.Front
                    ? FrontEndpointTriangleIcon
                    : RearEndpointTriangleIcon;
            }
            case ConnectorEndpointStyle.Circle: {
                return end === ConnectorEndpoint.Front
                    ? FrontEndpointCircleIcon
                    : RearEndpointCircleIcon;
            }
            case ConnectorEndpointStyle.Diamond: {
                return end === ConnectorEndpoint.Front
                    ? FrontEndpointDiamondIcon
                    : RearEndpointDiamondIcon;
            }
        }
    }
    render() {
        const selectedColor = getMostCommonColor(this.elements);
        const selectedMode = getMostCommonMode(this.elements);
        const selectedLineSize = getMostCommonLineWidth(this.elements) ?? LineWidth.LINE_WIDTH_FOUR;
        const selectedRough = getMostCommonRough(this.elements);
        const selectedLineStyle = getMostCommonLineStyle(this.elements);
        const selectedStartPointStyle = getMostCommonEndpointStyle(this.elements, ConnectorEndpoint.Front) ??
            DEFAULT_FRONT_END_POINT_STYLE;
        const selectedEndPointStyle = getMostCommonEndpointStyle(this.elements, ConnectorEndpoint.Rear) ??
            DEFAULT_REAR_END_POINT_STYLE;
        return html `
      <edgeless-menu-button
        .padding=${4}
        class="connector-color-button"
        .iconInfo=${{
            icon: html `${ColorUnit(selectedColor)}`,
            tooltip: 'Color',
        }}
        .menuChildren=${html ` <edgeless-color-panel
          .value=${selectedColor}
          @select=${(e) => this._setConnectorColor(e.detail)}
        >
        </edgeless-color-panel>`}
      ></edgeless-menu-button>

      <menu-divider .vertical=${true} .dividerMargin=${12}></menu-divider>

      <edgeless-menu-button
        class="line-styles-button"
        .padding=${8}
        .gap=${8}
        .iconInfo=${{
            icon: html `${LineStyleIcon}${SmallArrowDownIcon}`,
            tooltip: 'Border style',
        }}
        .menuChildren=${html `
          <edgeless-line-width-panel
            .selectedSize=${selectedLineSize}
            @select=${(e) => {
            this._setConnectorStrokeWidth(e.detail);
        }}
          ></edgeless-line-width-panel>
          <menu-divider
            .vertical=${true}
            .dividerMargin=${2}
            style=${styleMap({ height: '24px' })}
          ></menu-divider>
          <edgeless-tool-icon-button
            class=${`edgeless-component-line-style-button-${StrokeStyle.Solid}`}
            .tooltip=${'Solid'}
            .active=${selectedLineStyle === StrokeStyle.Solid}
            .activeMode=${'background'}
            .iconContainerPadding=${2}
            @click=${() => this._setConnectorStrokeStyle(StrokeStyle.Solid)}
          >
            ${StraightLineIcon}
          </edgeless-tool-icon-button>
          <edgeless-tool-icon-button
            class=${`edgeless-component-line-style-button-${StrokeStyle.Dashed}`}
            .tooltip=${'Dash'}
            .active=${selectedLineStyle === StrokeStyle.Dashed}
            .activeMode=${'background'}
            .iconContainerPadding=${2}
            @click=${() => this._setConnectorStrokeStyle(StrokeStyle.Dashed)}
          >
            ${DashLineIcon}
          </edgeless-tool-icon-button>
        `}
      >
      </edgeless-menu-button>

      <menu-divider .vertical=${true} .dividerMargin=${12}></menu-divider>

      <edgeless-menu-button
        .padding=${8}
        .gap=${8}
        .iconInfo=${{
            icon: html `${selectedRough
                ? ScribbledStyleIcon
                : GeneralStyleIcon}${SmallArrowDownIcon}`,
            tooltip: 'Style',
        }}
        .menuChildren=${html `
          <edgeless-tool-icon-button
            .tooltip=${'General'}
            .iconContainerPadding=${2}
            .active=${!selectedRough}
            .activeMode=${'background'}
            @click=${() => this._setConnectorRough(false)}
          >
            ${GeneralStyleIcon}
          </edgeless-tool-icon-button>
          <edgeless-tool-icon-button
            .tooltip=${'Scribbled'}
            .active=${selectedRough}
            .activeMode=${'background'}
            .iconContainerPadding=${2}
            @click=${() => this._setConnectorRough(true)}
          >
            ${ScribbledStyleIcon}
          </edgeless-tool-icon-button>
        `}
      >
      </edgeless-menu-button>

      <menu-divider .vertical=${true} .dividerMargin=${12}></menu-divider>

      <div class="connector-style-sub-menu">
        <edgeless-menu-button
          .padding=${8}
          .gap=${8}
          .iconInfo=${{
            icon: html `${this._getEndpointIcon(ConnectorEndpoint.Front, selectedStartPointStyle)}${SmallArrowDownIcon}`,
            tooltip: 'Start Point Style',
        }}
          .menuChildren=${html `
            <edgeless-tool-icon-button
              .tooltip=${'None'}
              .iconContainerPadding=${2}
              .active=${selectedStartPointStyle === ConnectorEndpointStyle.None}
              .activeMode=${'background'}
              @click=${() => this._setConnectorEndpointStyle(ConnectorEndpoint.Front, ConnectorEndpointStyle.None)}
            >
              ${ConnectorEndpointNoneIcon}
            </edgeless-tool-icon-button>
            <edgeless-tool-icon-button
              .tooltip=${'Arrow'}
              .iconContainerPadding=${2}
              .active=${selectedStartPointStyle ===
            ConnectorEndpointStyle.Arrow}
              .activeMode=${'background'}
              @click=${() => this._setConnectorEndpointStyle(ConnectorEndpoint.Front, ConnectorEndpointStyle.Arrow)}
            >
              ${FrontEndpointArrowIcon}
            </edgeless-tool-icon-button>
            <edgeless-tool-icon-button
              .tooltip=${'Triangle'}
              .iconContainerPadding=${2}
              .active=${selectedStartPointStyle ===
            ConnectorEndpointStyle.Triangle}
              .activeMode=${'background'}
              @click=${() => this._setConnectorEndpointStyle(ConnectorEndpoint.Front, ConnectorEndpointStyle.Triangle)}
            >
              ${FrontEndpointTriangleIcon}
            </edgeless-tool-icon-button>
            <edgeless-tool-icon-button
              .tooltip=${'Circle'}
              .iconContainerPadding=${2}
              .active=${selectedStartPointStyle ===
            ConnectorEndpointStyle.Circle}
              .activeMode=${'background'}
              @click=${() => this._setConnectorEndpointStyle(ConnectorEndpoint.Front, ConnectorEndpointStyle.Circle)}
            >
              ${FrontEndpointCircleIcon}
            </edgeless-tool-icon-button>
            <edgeless-tool-icon-button
              .tooltip=${'Diamond'}
              .iconContainerPadding=${2}
              .active=${selectedStartPointStyle ===
            ConnectorEndpointStyle.Diamond}
              .activeMode=${'background'}
              @click=${() => this._setConnectorEndpointStyle(ConnectorEndpoint.Front, ConnectorEndpointStyle.Diamond)}
            >
              ${FrontEndpointDiamondIcon}
            </edgeless-tool-icon-button>
          `}
        >
        </edgeless-menu-button>

        <edgeless-tool-icon-button
          .tooltip=${'Flip Direction'}
          .iconContainerPadding=${2}
          .disabled=${false}
          @click=${() => this._flipEndpointStyle(selectedStartPointStyle, selectedEndPointStyle)}
        >
          ${FlipDirectionIcon}
        </edgeless-tool-icon-button>

        <edgeless-menu-button
          .padding=${8}
          .gap=${8}
          .iconInfo=${{
            icon: html `${this._getEndpointIcon(ConnectorEndpoint.Rear, selectedEndPointStyle)}${SmallArrowDownIcon}`,
            tooltip: 'End Point Style',
        }}
          .menuChildren=${html `
            <edgeless-tool-icon-button
              .tooltip=${'Diamond'}
              .iconContainerPadding=${2}
              .active=${selectedEndPointStyle ===
            ConnectorEndpointStyle.Diamond}
              .activeMode=${'background'}
              @click=${() => this._setConnectorEndpointStyle(ConnectorEndpoint.Rear, ConnectorEndpointStyle.Diamond)}
            >
              ${RearEndpointDiamondIcon}
            </edgeless-tool-icon-button>
            <edgeless-tool-icon-button
              .tooltip=${'Circle'}
              .iconContainerPadding=${2}
              .active=${selectedEndPointStyle === ConnectorEndpointStyle.Circle}
              .activeMode=${'background'}
              @click=${() => this._setConnectorEndpointStyle(ConnectorEndpoint.Rear, ConnectorEndpointStyle.Circle)}
            >
              ${RearEndpointCircleIcon}
            </edgeless-tool-icon-button>
            <edgeless-tool-icon-button
              .tooltip=${'Triangle'}
              .iconContainerPadding=${2}
              .active=${selectedEndPointStyle ===
            ConnectorEndpointStyle.Triangle}
              .activeMode=${'background'}
              @click=${() => this._setConnectorEndpointStyle(ConnectorEndpoint.Rear, ConnectorEndpointStyle.Triangle)}
            >
              ${RearEndpointTriangleIcon}
            </edgeless-tool-icon-button>
            <edgeless-tool-icon-button
              .tooltip=${'Arrow'}
              .iconContainerPadding=${2}
              .active=${selectedEndPointStyle === ConnectorEndpointStyle.Arrow}
              .activeMode=${'background'}
              @click=${() => this._setConnectorEndpointStyle(ConnectorEndpoint.Rear, ConnectorEndpointStyle.Arrow)}
            >
              ${RearEndpointArrowIcon}
            </edgeless-tool-icon-button>
            <edgeless-tool-icon-button
              .tooltip=${'None'}
              .iconContainerPadding=${2}
              .active=${selectedEndPointStyle === ConnectorEndpointStyle.None}
              .activeMode=${'background'}
              @click=${() => this._setConnectorEndpointStyle(ConnectorEndpoint.Rear, ConnectorEndpointStyle.None)}
            >
              ${ConnectorEndpointNoneIcon}
            </edgeless-tool-icon-button>
          `}
        >
        </edgeless-menu-button>

        <edgeless-menu-button
          .padding=${8}
          .gap=${8}
          .iconInfo=${{
            icon: html `${selectedMode === ConnectorMode.Straight
                ? StraightLineIcon
                : selectedMode === ConnectorMode.Orthogonal
                    ? ElbowedLineIcon
                    : CurveLineIcon}${SmallArrowDownIcon}`,
            tooltip: 'Connector Shape',
        }}
          .menuChildren=${html `
            <edgeless-tool-icon-button
              .tooltip=${'Straight'}
              .iconContainerPadding=${2}
              .active=${selectedMode === ConnectorMode.Straight}
              .activeMode=${'background'}
              @click=${() => this._setConnectorMode(ConnectorMode.Straight)}
            >
              ${StraightLineIcon}
            </edgeless-tool-icon-button>
            <edgeless-tool-icon-button
              .tooltip=${'Elbowed'}
              .iconContainerPadding=${2}
              .active=${selectedMode === ConnectorMode.Orthogonal}
              .activeMode=${'background'}
              @click=${() => this._setConnectorMode(ConnectorMode.Orthogonal)}
            >
              ${ElbowedLineIcon}
            </edgeless-tool-icon-button>
            <edgeless-tool-icon-button
              .tooltip=${'Curve'}
              .iconContainerPadding=${2}
              .active=${selectedMode === ConnectorMode.Curve}
              .activeMode=${'background'}
              @click=${() => this._setConnectorMode(ConnectorMode.Curve)}
            >
              ${CurveLineIcon}
            </edgeless-tool-icon-button>
          `}
        >
        </edgeless-menu-button>
      </div>
    `;
    }
};
EdgelessChangeConnectorButton.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;
      }

      .connector-style-sub-menu {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 12px;
      }
    `,
];
__decorate([
    property({ attribute: false })
], EdgelessChangeConnectorButton.prototype, "edgeless", void 0);
__decorate([
    property({ attribute: false })
], EdgelessChangeConnectorButton.prototype, "elements", void 0);
__decorate([
    property({ attribute: false })
], EdgelessChangeConnectorButton.prototype, "page", void 0);
__decorate([
    property({ attribute: false })
], EdgelessChangeConnectorButton.prototype, "surface", void 0);
EdgelessChangeConnectorButton = __decorate([
    customElement('edgeless-change-connector-button')
], EdgelessChangeConnectorButton);
export { EdgelessChangeConnectorButton };
//# sourceMappingURL=change-connector-button.js.map