/* eslint-disable no-restricted-syntax */
// #region Imports
import { html } from '../../../../Dom/Html';
import { ifDefined, when } from '../../../Directives/Directives';
import { Appearance } from '../../../Types/Appearance';
import { isRtl } from '../../../Types/FlowDirection';
import { isHorizontal, isVertical, Orientation } from '../../../Types/Orientation';
// #endregion
/**
 * The template of the {@link SplitElement}.
 *
 * @public
 */
export function splitElementTemplate(e) {
    const gridTemplate = isVertical(e.orientation) ? 'gridTemplateRows' : 'gridTemplateColumns';
    const gridTemplateOpposite = isVertical(e.orientation) ? 'gridTemplateColumns' : 'gridTemplateRows';
    // Position, min, and max are now CssLength values - use them directly in CSS
    const position = e.position;
    const min = e.min;
    const max = e.max;
    // Build the primary panel size using clamp with CssLength values
    // The position value is used directly as a CSS value (e.g., '50%', '200px')
    const primary = `clamp(0%, clamp(${min}, calc(${position} - var(--split-divider-width) / 2), ${max}), calc(100% - var(--split-divider-width)))`;
    // unset the old grid template property
    e.style[gridTemplateOpposite] = '';
    if (e.lock === 'end') {
        if (isRtl(e.dir) && isHorizontal(e.orientation)) {
            e.style[gridTemplate] = `${primary} var(--split-divider-width) auto`;
        }
        else {
            e.style[gridTemplate] = `auto var(--split-divider-width) ${primary}`;
        }
    }
    else if (isRtl(e.dir) && isHorizontal(e.orientation)) {
        e.style[gridTemplate] = `auto var(--split-divider-width) ${primary}`;
    }
    else {
        e.style[gridTemplate] = `${primary} var(--split-divider-width) auto`;
    }
    return html `
        <slot name="${e.reverse ? 'end' : 'start'}"
              part="panel start"
              class="start"></slot>
        ${when(e.hasPanels, () => html `
        <div part="divider"
             class="divider"
             tabindex=${ifDefined(e.disabled ? undefined : '0')}
             role="separator"
             aria-valuenow=${e.positionPercentage}
             aria-valuemin="0"
             aria-valuemax="100"
             aria-label="resize"
             @keydown=${(x) => e.handleKeyDown(x)}
             @mousedown=${(x) => e.handleDrag(x)}
             @touchstart=${(x) => e.handleDrag(x)}>
            <slot name="thumb">
                <mosaik-icon part="thumb"
                             .appearance="${Appearance.Soft}"
                             .angel="${e.orientation === Orientation.Horizontal ? 0 : 90}"
                             .data="${'M12 8a2 2 0 1 1 0-4 2 2 0 0 1 0 4ZM12 14a2 2 0 1 1 0-4 2 2 0 0 1 0 4ZM10 18a2 2 0 1 0 4 0 2 2 0 0 0-4 0Z'}"
                             ?disabled="${e.disabled}"></mosaik-icon>
            </slot>
        </div>
        `)}
        <slot name="${e.reverse ? 'start' : 'end'}"
              part="panel end"
              class="end"></slot>
    `;
}
//# sourceMappingURL=SplitElementTemplate.js.map