/* eslint-disable lit/prefer-static-styles */
// #region Imports
import { html } from '../../../../Dom/Html';
import { RendererServiceLocator } from '../../../../Dom/Renderer';
import { style } from '../../../../Dom/Style';
import { svg } from '../../../../Dom/Svg';
import { styleMap, when } from '../../../Directives/Directives';
import { MeterScale } from '../../../Types/MeterScale';
// #endregion
/**
 * The template of the `MeterRingElement`.
 *
 * @public
 */
export function meterRingElementTemplate(e) {
    const isSegmented = e.scale === MeterScale.Segmented;
    const cx = e.diameter / 2;
    const cy = e.diameter / 2;
    const inlineStyle = style `
        :host {
            --_meter-ring-thickness: ${e.thickness}px;
            --_meter-ring-radius: ${e.radius}px;
            --_meter-ring-value: ${e.percent};
        }
    `;
    return html `
        <style>
            ${inlineStyle}
        </style>
        ${when(e.label.trim(), () => html `
        <slot name="label">
            <mosaik-text part="label"
                         .truncate="${true}"
                         .text="${e.label.trim()}"></mosaik-text>
        </slot>
        `)}
        <svg part="root"
             viewBox="0 0 ${e.diameter} ${e.diameter}"
             style="${styleMap({ width: `${e.diameter}px`, height: `${e.diameter}px` })}">
            ${when(isSegmented, () => svg `
                <circle part="bar"></circle>
                ${e.segments.map((segment) => svg `
                    <path part="segment"
                          data-range="${segment.range}"
                          d="${e.getArcPath(segment.startAngle, segment.angle, e.effectiveRadius, cx, cy)}"
                          fill="none"
                          stroke-width="${e.thickness}"></path>
                `)}
                <circle part="marker"
                        cx="${e.markerPosition.x}"
                        cy="${e.markerPosition.y}"
                        r="${e.thickness / 2 + 2}"></circle>
            `, () => svg `
                <circle part="bar"></circle>
                <circle part="fill"></circle>
            `)}
        </svg>
        <div part="hint">
            <slot name="hint"
                  @slotchange="${(x) => x.target.assignedElements().map((y, i) => RendererServiceLocator.current.setStyle(y, 'order', i))}"></slot>
        </div>
    `;
}
//# sourceMappingURL=MeterRingElementTemplate.js.map