/**
 * p11ProgressBarNative.js
 * Handles advanced dynamic styling for native HTML progress bar elements.
 * Updated to support custom hex/rgb/variable colors across all engines.
 */
import { UtilityFunctions } from './p11utility.js';

export const P11ProgressBarNativeFunctions = {
    /**
     * Sets comprehensive styles for a native progress bar.
     */
    setProgressBarStyles: function (className, color, height, radius, trackColor, isAnimated) {
        if (!className) return;

        const styleId = `p11-progress-style-${className}`;
        let styleElement = document.getElementById(styleId);

        if (!styleElement) {
            styleElement = document.createElement('style');
            styleElement.id = styleId;
            document.head.appendChild(styleElement);
        }

        const transition = isAnimated ? 'transition: all 0.4s ease-in-out;' : '';

        // The core fix: We must set background: none on the base element 
        // to prevent the native gray OS-background from shining through.
        styleElement.textContent = `
            .${className} {
                -webkit-appearance: none;
                -moz-appearance: none;
                appearance: none;
                border: none;
                height: ${height};
                border-radius: ${radius};
                display: block;
                width: 100%;
                background-color: ${trackColor} !important; /* Force track color */
                overflow: hidden;
            }

            /* Container for Webkit (Chrome, Safari, Capacitor, Edge) */
            .${className}::-webkit-progress-bar {
                background-color: ${trackColor} !important;
                border-radius: ${radius};
            }

            /* Progress Value for Webkit */
            .${className}::-webkit-progress-value {
                background-color: ${color} !important;
                border-radius: ${radius};
                ${transition}
            }

            /* Progress Value for Mozilla (Firefox) */
            .${className}::-moz-progress-bar {
                background-color: ${color} !important;
                border-radius: ${radius};
                ${transition}
            }
        `;

        if (window.p11Js) {
            window.p11Js.log("ProgressBar", `Styles updated for .${className} (Color: ${color}, Height: ${height})`);
        }
    }
};



///**
// * p11ProgressBarNative.js
// * Part of the p11 UI Library.
// * Handles dynamic styling for native HTML progress bar elements.
// * All comments and documentation are in English.
// */

//import { UtilityFunctions } from './p11utility.js';

///* ========================================================================
//   PUBLIC EXPORTED FUNCTIONS
//   ======================================================================== */

//export const P11ProgressBarNativeFunctions = {

//    /**
//     * Sets the color of a native progress bar by injecting a dynamic style tag.
//     * This targets both WebKit (Chrome, Safari, Edge) and Mozilla (Firefox) engines.
//     * @param {string} className - The CSS class name of the target progress bar.
//     * @param {string} color - The CSS color value (hex, rgb, etc.).
//     */
//    setProgressBarColor: function (className, color) {
//        if (!className || !color) {
//            UtilityFunctions.error("setProgressBarColor: Missing className or color.");
//            return;
//        }

//        const styleId = `p11-progress-style-${className}`;
//        let styleElement = document.getElementById(styleId);

//        UtilityFunctions.log(`setProgressBarColor: Updating color for .${className} to ${color}`);

//        if (!styleElement) {
//            styleElement = document.createElement('style');
//            styleElement.id = styleId;
//            document.head.appendChild(styleElement);
//            UtilityFunctions.log(`Created new style element with ID: ${styleId}`);
//        }

//        // Apply styles for both WebKit and Mozilla engines
//        styleElement.textContent = `
//            .${className}::-webkit-progress-value {
//                background-color: ${color} !important;
//            }
//            .${className}::-moz-progress-bar {
//                background-color: ${color} !important;
//            }
//        `;
//    },

//    /**
//     * Legacy Bridge Registration for ProgressBar.
//     * Maps functions to window.TpcModalJs for compatibility.
//     */
//    registerLegacyFunctions: function () {
//        if (!window.TpcModalJs) window.TpcModalJs = {};

//        window.TpcModalJs.setProgressBarColor = (className, color) => this.setProgressBarColor(className, color);

//        UtilityFunctions.log("Legacy ProgressBar functions registered in p11ProgressBarNative.js.");
//    }
//};

//// Auto-register legacy support
//P11ProgressBarNativeFunctions.registerLegacyFunctions();