import React, { createContext, useContext, useEffect, useState } from "react";

export const ConfigContext = createContext({
    config: {
        BACKEND_HOST: null,
        FRONTEND_HOST: null,
        KC_CLIENT_ID: null,
        OIDC_CONFIG: {},
    },
    isLoading: true,
    error: null,
});

export const useConfig = () => useContext(ConfigContext).config;

const ConfigProvider = ({ children }) => {
    const [config, setConfig] = useState({
        BACKEND_HOST: null,
        FRONTEND_HOST: null,
        KC_CLIENT_ID: null,
        OIDC_CONFIG: {},
    });
    const [isLoading, setIsLoading] = useState(true);
    const [error, setError] = useState(null);

    useEffect(() => {
        fetch('/config.json')
            .then((res) => {
                if (!res.ok) {
                    throw new Error(`Failed to fetch config: ${res.statusText}`);
                }
                return res.json();
            })
            .then((data) => {
                setConfig(data);
                setIsLoading(false);
            })
            .catch((err) => {
                console.error("Error fetching config:", err);
                setError(err);
                setIsLoading(false);
            });
    }, []);

    if (isLoading) {
        return <div>Loading configuration...</div>;
    }

    if (error) {
        return <div>Error loading configuration: {error.message}</div>;
    }

    return (
        <ConfigContext.Provider value={{ config, isLoading, error }}>
            {children}
        </ConfigContext.Provider>
    );
}

export default ConfigProvider;