import { html } from 'lit';
import { repeat } from 'lit/directives/repeat.js';
import { LineStyleButton, lineStyleButtonStyles, } from '../buttons/line-style-button.js';
import { PanelWrapper, panelWrapperStyle } from './panel-wrapper.js';
export const lineStylesPanelStyles = [panelWrapperStyle, lineStyleButtonStyles];
export function LineStylesPanel({ onClick, selectedLineSize, selectedLineStyle, lineStyle = ['solid', 'dash', 'none'], } = {}) {
    const lineSizePanel = html `
    <edgeless-line-width-panel
      .selectedSize=${selectedLineSize}
      .disable=${selectedLineStyle === 'none'}
      @select=${(e) => {
        onClick?.({
            type: 'size',
            value: e.detail,
        });
    }}
    ></edgeless-line-width-panel>
  `;
    const lineStyleButtons = repeat(lineStyle, mode => mode, mode => {
        return LineStyleButton({
            className: 'line-style-button',
            mode,
            active: mode === selectedLineStyle,
            onClick: () => {
                onClick?.({
                    type: 'lineStyle',
                    value: mode,
                });
            },
        });
    });
    return PanelWrapper({
        className: 'line-style-panel',
        children: html `
      ${lineSizePanel}
      <component-toolbar-menu-divider></component-toolbar-menu-divider>
      ${lineStyleButtons}
    `,
    });
}
//# sourceMappingURL=line-styles-panel.js.map