'use client';

import { createContext, useContext, useEffect, useState } from 'react';
import { fetchConfig } from '@/lib/api/system';
import Config from '@/types/config';

const ConfigContext = createContext<Config|null>(null);

// Context Provider
export function ConfigProvider({ children }: { children: React.ReactNode }) {
	const [config, setConfig] = useState<Config|null>(null);
	const [loading, setLoading] = useState<boolean>(true);

	useEffect(() => {
		fetchConfig().then((configs) => {
			if (configs) {
				setConfig(configs.data);
			}
		}).catch((err) => {
			console.error(err);
		}).finally(() => {
			setLoading(false);
		});
	}, []);

	if (loading) {
		return <></>;
	}

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

// Context 사용을 위한 커스텀 훅
export function useConfigContext(): Config {
	const context = useContext(ConfigContext);

	if (context === null) {
	  	throw new Error('useConfigContext는 ConfigProvider 내부에서만 사용 가능합니다.');
	}

	return context;
}