import React, {useEffect, useState} from "react";
import WideAccessWidget from "./WideAccessWidget.jsx";
import {WidgetProvider} from "./context/WidgetContext";

/**
 * Get widget configuration from window.WPWidgetConfig
 * This function can be replaced with different implementations for other platforms
 * (e.g., fetching from CDN for non-WordPress platforms)
 * 
 * @returns {Object} Configuration object with mainColor, textColor, enabledOptions, tier, and accessibilityStatement
 */
function getWidgetConfiguration() {
    // For WordPress: Parse configuration from window.WPWidgetConfig
    const wpConfig = window.WPWidgetConfig;
    
    // Use iconColor as the main color for consistency across the widget
    const mainColor = wpConfig?.iconColor;

    return {
        mainColor: mainColor,
        textColor: wpConfig?.textColor,
        enabledOptions: wpConfig?.enabledOptions,
        tier: wpConfig?.tier,
        accessibilityStatement: wpConfig?.accessibilityStatement
    };
}

export default function App() {
    const [config, setConfig] = useState(null);

    useEffect(() => {
        // Get configuration (platform-specific implementation)
        const configData = getWidgetConfiguration();
        
        // Apply CSS custom properties for widget styling
        const root = document.documentElement;
        const hostEl = window.__WIDEACCESS_HOST__;
        if (configData.mainColor) {
            // Primary color used for icon background, widget header, and links
            root.style.setProperty("--widget-primary", configData.mainColor);
            root.style.setProperty("--widget-primary-hover", configData.mainColor);
            if (hostEl) {
                hostEl.style.setProperty("--widget-primary", configData.mainColor);
                hostEl.style.setProperty("--widget-primary-hover", configData.mainColor);
                hostEl.style.setProperty("--widget-link-color", configData.mainColor);
            }
            
            // For "Powered by WideAccess" link color
            root.style.setProperty("--widget-link-color", configData.mainColor);
        }
        if (configData.textColor) {
            root.style.setProperty("--widget-text", configData.textColor);
        }

        setConfig(configData);
    }, []);

    if (!config) {
        return null;
    }

    return (
        <WidgetProvider>
            <WideAccessWidget config={config}/>
        </WidgetProvider>
    )
}