import './tool-icon-button.js';
import { css, html } from 'lit';
import { BanIcon, DashLineIcon, StraightLineIcon, } from '../../../../_common/icons/index.js';
export const lineStyleButtonStyles = [
    css `
    .edgeless-component-line-style-button {
      display: flex;
      justify-content: center;
      align-items: center;
      color: var(--affine-icon-color);
    }

    .line-style-button:nth-of-type(2),
    .line-style-button:nth-of-type(3) {
      margin-left: 8px;
    }
  `,
];
function getModeIcon(mode) {
    switch (mode) {
        case 'solid': {
            return StraightLineIcon;
        }
        case 'dash': {
            return DashLineIcon;
        }
        case 'none': {
            return BanIcon;
        }
    }
}
function getModeTooltip(mode) {
    return {
        solid: 'Solid',
        dash: 'Dash',
        none: 'None',
    }[mode];
}
export function LineStyleButton({ className, mode, active, tooltip: tooltipFromProps, onClick, }) {
    const classnames = `edgeless-component-line-style-button mode-${mode} ${active ? 'active' : ''}`;
    const icon = getModeIcon(mode);
    const tooltip = tooltipFromProps !== undefined ? tooltipFromProps : getModeTooltip(mode);
    return html `<edgeless-tool-icon-button
    class=${className ?? ''}
    .active=${active ?? false}
    .activeMode=${'background'}
    .tooltip=${tooltip}
    .iconContainerPadding=${2}
    @click=${onClick}
  >
    <div class=${classnames}>${icon}</div>
  </edgeless-tool-icon-button>`;
}
//# sourceMappingURL=line-style-button.js.map