import type { FC } from 'react';
import React, { useState, useEffect } from 'react';
import { DEFAULT_BRAND } from '@theorchard/constants';
import { applyTheme } from '../utils';
import ThemeContext from './themeContext';
import type { AppEnvConfig } from '../types';

interface ThemeProviderProps {
    children?: React.ReactNode;
    config: AppEnvConfig;
}

const ThemeProvider: FC<ThemeProviderProps> = ({ children, config }) => {
    const [theme, setTheme] = useState<string>(`${config.brand || DEFAULT_BRAND}`);

    useEffect(() => {
        applyTheme(theme);
    }, [theme]);

    useEffect(() => {
        setTheme(`${config.brand || DEFAULT_BRAND}`);
    }, [config.brand]);

    return <ThemeContext.Provider value={{ theme, setTheme }}>{children}</ThemeContext.Provider>;
};

export default ThemeProvider;