/* eslint-disable no-restricted-syntax */
// #region Imports
import { html } from '../../../../Dom/Html';
import { ifDefined, when } from '../../../Directives/Directives';
import { isRtl } from '../../../Types/FlowDirection';
import { isHorizontal, isVertical } from '../../../Types/Orientation';
// #endregion
/**
 * The template of the `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;
    // Determine grid template based on collapsed state
    let primary;
    if (e.isStartCollapsed) {
        // Start panel is collapsed - use 0 for primary
        primary = '0';
    }
    else if (e.isEndCollapsed) {
        // End panel is collapsed - use calc(100% - divider) for primary
        primary = 'calc(100% - var(--split-divider-width))';
    }
    else {
        // Normal state - use clamp with min/max constraints
        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"></slot>
        ${when(e.hasPanels, () => html `
        <div part="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-thumb part="thumb"
                              .dir="${e.dir}"
                              .lang="${e.lang}"
                              .edge="${e.orientation === 'horizontal' ? 'vertical' : 'horizontal'}"
                              ?disabled="${e.disabled}"
                              @dblclick=${() => e.handleDoubleClick()}></mosaik-thumb>
            </slot>
        </div>
        `)}
        <slot name="${e.reverse ? 'start' : 'end'}"
              part="panel end"></slot>
    `;
}
//# sourceMappingURL=SplitElementTemplate.js.map