// #region Imports
import chroma from 'chroma-js';
import { html } from '../../../../Dom/Html';
import { Icons } from '../../../../Resources/Icons';
import { when } from '../../../Directives/Directives';
// #endregion
/**
 * @internal
 */
export function colorEditorInputsElementTemplate(e) {
    let hexValue = '#000000';
    let r = 0;
    let g = 0;
    let b = 0;
    let h = 0;
    let s = 0;
    let l = 0;
    let v = 0;
    let labL = 0;
    let labA = 0;
    let labB = 0;
    let lchL = 0;
    let lchC = 0;
    let lchH = 0;
    let oklabL = 0;
    let oklabA = 0;
    let oklabB = 0;
    let oklchL = 0;
    let oklchC = 0;
    let oklchH = 0;
    let a = 1;
    try {
        const chromaColor = chroma(e.color);
        hexValue = chromaColor.hex('rgb');
        [r, g, b] = chromaColor.rgb();
        const hslValues = chromaColor.hsl();
        const hsvValues = chromaColor.hsv();
        const labValues = chromaColor.lab();
        const lchValues = chromaColor.lch();
        h = isNaN(hslValues[0]) ? 0 : hslValues[0];
        s = hslValues[1];
        l = hslValues[2];
        v = hsvValues[2];
        labL = labValues[0];
        labA = labValues[1];
        labB = labValues[2];
        lchL = lchValues[0];
        lchC = lchValues[1];
        lchH = isNaN(lchValues[2]) ? 0 : lchValues[2];
        // OKLAB and OKLCH (may not be available in all chroma versions)
        try {
            const oklabValues = chromaColor.oklab();
            oklabL = oklabValues[0];
            oklabA = oklabValues[1];
            oklabB = oklabValues[2];
            const oklchValues = chromaColor.oklch();
            oklchL = oklchValues[0];
            oklchC = oklchValues[1];
            oklchH = isNaN(oklchValues[2]) ? 0 : oklchValues[2];
        }
        catch {
            // OKLAB/OKLCH not supported
        }
        a = chromaColor.alpha();
    }
    catch { /* Use defaults */ }
    const formatSwitcher = html `
        <mosaik-button-group .dir="${e.dir}"
                             .lang="${e.lang}"
                             .appearance="${'plain'}"
                             .orientation="${'vertical'}"
                             ?disabled="${e.disabled}">
            <mosaik-button part="previous"
                           .icon="${Icons.caretUp}"
                           .iconSize="${'small'}"
                           ?disabled="${e.disabled}"
                           @click="${() => e.previousFormat()}"></mosaik-button>
            <mosaik-button part="next"
                           .icon="${Icons.caretDown}"
                           .iconSize="${'small'}"
                           ?disabled="${e.disabled}"
                           @click="${() => e.nextFormat()}"></mosaik-button>
        </mosaik-button-group>
    `;
    const alphaInput = when(e.showAlpha, () => html `
        <div part="input-group">
            <mosaik-numberbox part="input"
                              .min="${0}"
                              .max="${100}"
                              .step="${1}"
                              .label="${'A'}"
                              .value="${Math.round(a * 100)}"
                              .disabled="${e.disabled}"
                              @input="${(ev) => e.onAlphaChange(ev)}"></mosaik-numberbox>
        </div>
    `);
    switch (e.format) {
        case 'hex':
            return html `
                <div part="input-group" data-flex="true">
                    <mosaik-textbox part="input"
                                    .label="${'HEX'}"
                                    .value="${hexValue}"
                                    .disabled="${e.disabled}"
                                    .maxLength="${7}"
                                    @input="${(ev) => e.onHexChange(ev)}"></mosaik-textbox>
                </div>
                ${alphaInput}
                ${formatSwitcher}
            `;
        case 'rgb':
            return html `
                <div part="input-group" data-flex="true">
                    <mosaik-numberbox part="input"
                                      .min="${0}"
                                      .max="${255}"
                                      .step="${1}"
                                      .label="${'R'}"
                                      .value="${Math.round(r)}"
                                      .disabled="${e.disabled}"
                                      @input="${(ev) => e.onRgbChange(ev, 'r')}"></mosaik-numberbox>
                </div>
                <div part="input-group" data-flex="true">
                    <mosaik-numberbox part="input"
                                      .min="${0}"
                                      .max="${255}"
                                      .step="${1}"
                                      .label="${'G'}"
                                      .value="${Math.round(g)}"
                                      .disabled="${e.disabled}"
                                      @input="${(ev) => e.onRgbChange(ev, 'g')}"></mosaik-numberbox>
                </div>
                <div part="input-group" data-flex="true">
                    <mosaik-numberbox part="input"
                                      .min="${0}"
                                      .max="${255}"
                                      .step="${1}"
                                      .label="${'B'}"
                                      .value="${Math.round(b)}"
                                      .disabled="${e.disabled}"
                                      @input="${(ev) => e.onRgbChange(ev, 'b')}"></mosaik-numberbox>
                </div>
                ${alphaInput}
                ${formatSwitcher}
            `;
        case 'hsl':
            return html `
                <div part="input-group" data-flex="true">
                    <mosaik-numberbox part="input"
                                      .min="${0}"
                                      .max="${360}"
                                      .step="${1}"
                                      .label="${'H'}"
                                      .value="${Math.round(h)}"
                                      .disabled="${e.disabled}"
                                      @input="${(ev) => e.onHslChange(ev, 'h')}"></mosaik-numberbox>
                </div>
                <div part="input-group" data-flex="true">
                    <mosaik-numberbox part="input"
                                      .min="${0}"
                                      .max="${100}"
                                      .step="${1}"
                                      .label="${'S'}"
                                      .value="${Math.round(s * 100)}"
                                      .disabled="${e.disabled}"
                                      @input="${(ev) => e.onHslChange(ev, 's')}"></mosaik-numberbox>
                </div>
                <div part="input-group" data-flex="true">
                    <mosaik-numberbox part="input"
                                      .min="${0}"
                                      .max="${100}"
                                      .step="${1}"
                                      .label="${'L'}"
                                      .value="${Math.round(l * 100)}"
                                      .disabled="${e.disabled}"
                                      @input="${(ev) => e.onHslChange(ev, 'l')}"></mosaik-numberbox>
                </div>
                ${alphaInput}
                ${formatSwitcher}
            `;
        case 'hsv':
            return html `
                <div part="input-group" data-flex="true">
                    <mosaik-numberbox part="input"
                                      .min="${0}"
                                      .max="${360}"
                                      .step="${1}"
                                      .label="${'H'}"
                                      .value="${Math.round(h)}"
                                      .disabled="${e.disabled}"
                                      @input="${(ev) => e.onHsvChange(ev, 'h')}"></mosaik-numberbox>
                </div>
                <div part="input-group" data-flex="true">
                    <mosaik-numberbox part="input"
                                      .min="${0}"
                                      .max="${100}"
                                      .step="${1}"
                                      .label="${'S'}"
                                      .value="${Math.round(s * 100)}"
                                      .disabled="${e.disabled}"
                                      @input="${(ev) => e.onHsvChange(ev, 's')}"></mosaik-numberbox>
                </div>
                <div part="input-group" data-flex="true">
                    <mosaik-numberbox part="input"
                                      .min="${0}"
                                      .max="${100}"
                                      .step="${1}"
                                      .label="${'V'}"
                                      .value="${Math.round(v * 100)}"
                                      .disabled="${e.disabled}"
                                      @input="${(ev) => e.onHsvChange(ev, 'v')}"></mosaik-numberbox>
                </div>
                ${alphaInput}
                ${formatSwitcher}
            `;
        case 'lab':
            return html `
                <div part="input-group" data-flex="true">
                    <mosaik-numberbox part="input"
                                      .min="${0}"
                                      .max="${100}"
                                      .step="${1}"
                                      .label="${'L'}"
                                      .value="${Math.round(labL)}"
                                      .disabled="${e.disabled}"
                                      @input="${(ev) => e.onLabChange(ev, 'l')}"></mosaik-numberbox>
                </div>
                <div part="input-group" data-flex="true">
                    <mosaik-numberbox part="input"
                                      .min="${-128}"
                                      .max="${127}"
                                      .step="${1}"
                                      .label="${'A'}"
                                      .value="${Math.round(labA)}"
                                      .disabled="${e.disabled}"
                                      @input="${(ev) => e.onLabChange(ev, 'a')}"></mosaik-numberbox>
                </div>
                <div part="input-group" data-flex="true">
                    <mosaik-numberbox part="input"
                                      .min="${-128}"
                                      .max="${127}"
                                      .step="${1}"
                                      .label="${'B'}"
                                      .value="${Math.round(labB)}"
                                      .disabled="${e.disabled}"
                                      @input="${(ev) => e.onLabChange(ev, 'b')}"></mosaik-numberbox>
                </div>
                ${alphaInput}
                ${formatSwitcher}
            `;
        case 'lch':
            return html `
                <div part="input-group" data-flex="true">
                    <mosaik-numberbox part="input"
                                      .min="${0}"
                                      .max="${100}"
                                      .step="${1}"
                                      .label="${'L'}"
                                      .value="${Math.round(lchL)}"
                                      .disabled="${e.disabled}"
                                      @input="${(ev) => e.onLchChange(ev, 'l')}"></mosaik-numberbox>
                </div>
                <div part="input-group" data-flex="true">
                    <mosaik-numberbox part="input"
                                      .min="${0}"
                                      .max="${150}"
                                      .step="${1}"
                                      .label="${'C'}"
                                      .value="${Math.round(lchC)}"
                                      .disabled="${e.disabled}"
                                      @input="${(ev) => e.onLchChange(ev, 'c')}"></mosaik-numberbox>
                </div>
                <div part="input-group" data-flex="true">
                    <mosaik-numberbox part="input"
                                      .min="${0}"
                                      .max="${360}"
                                      .step="${1}"
                                      .label="${'H'}"
                                      .value="${Math.round(lchH)}"
                                      .disabled="${e.disabled}"
                                      @input="${(ev) => e.onLchChange(ev, 'h')}"></mosaik-numberbox>
                </div>
                ${alphaInput}
                ${formatSwitcher}
            `;
        case 'oklab':
            return html `
                <div part="input-group" data-flex="true">
                    <mosaik-numberbox part="input"
                                      .min="${0}"
                                      .max="${1}"
                                      .step="${0.01}"
                                      .label="${'L'}"
                                      .value="${oklabL}"
                                      .disabled="${e.disabled}"
                                      @input="${(ev) => e.onOklabChange(ev, 'l')}"></mosaik-numberbox>
                </div>
                <div part="input-group" data-flex="true">
                    <mosaik-numberbox part="input"
                                      .min="${-0.4}"
                                      .max="${0.4}"
                                      .step="${0.01}"
                                      .label="${'A'}"
                                      .value="${oklabA}"
                                      .disabled="${e.disabled}"
                                      @input="${(ev) => e.onOklabChange(ev, 'a')}"></mosaik-numberbox>
                </div>
                <div part="input-group" data-flex="true">
                    <mosaik-numberbox part="input"
                                      .min="${-0.4}"
                                      .max="${0.4}"
                                      .step="${0.01}"
                                      .label="${'B'}"
                                      .value="${oklabB}"
                                      .disabled="${e.disabled}"
                                      @input="${(ev) => e.onOklabChange(ev, 'b')}"></mosaik-numberbox>
                </div>
                ${alphaInput}
                ${formatSwitcher}
            `;
        case 'oklch':
            return html `
                <div part="input-group" data-flex="true">
                    <mosaik-numberbox part="input"
                                      .min="${0}"
                                      .max="${1}"
                                      .step="${0.01}"
                                      .label="${'L'}"
                                      .value="${oklchL}"
                                      .disabled="${e.disabled}"
                                      @input="${(ev) => e.onOklchChange(ev, 'l')}"></mosaik-numberbox>
                </div>
                <div part="input-group" data-flex="true">
                    <mosaik-numberbox part="input"
                                      .min="${0}"
                                      .max="${0.4}"
                                      .step="${0.01}"
                                      .label="${'C'}"
                                      .value="${oklchC}"
                                      .disabled="${e.disabled}"
                                      @input="${(ev) => e.onOklchChange(ev, 'c')}"></mosaik-numberbox>
                </div>
                <div part="input-group" data-flex="true">
                    <mosaik-numberbox part="input"
                                      .min="${0}"
                                      .max="${360}"
                                      .step="${1}"
                                      .label="${'H'}"
                                      .value="${Math.round(oklchH)}"
                                      .disabled="${e.disabled}"
                                      @input="${(ev) => e.onOklchChange(ev, 'h')}"></mosaik-numberbox>
                </div>
                ${alphaInput}
                ${formatSwitcher}
            `;
        default:
            // Fall back to hex for unsupported formats
            return html `
                <div part="input-group" data-flex="true">
                    <mosaik-textbox part="input"
                                    .label="${'HEX'}"
                                    .value="${hexValue}"
                                    .disabled="${e.disabled}"
                                    .maxLength="${7}"
                                    @input="${(ev) => e.onHexChange(ev)}"></mosaik-textbox>
                </div>
                ${alphaInput}
                ${formatSwitcher}
            `;
    }
}
//# sourceMappingURL=ColorEditorInputsElementTemplate.js.map