import React, {
	createContext,
	useContext,
	ReactNode,
	useEffect,
	useMemo,
} from "react";
import { theme } from "antd";
export interface TailwindTheme {
	[key: string]: string;
}

// Create a context for the agTheme
const AppThemeContext = createContext<{}>(
	null
);

export const useAppTheme = () => useContext(AppThemeContext);

export default function ThemeProvider({ children }: { children: ReactNode }) {
	const { token } = theme.useToken();

	const applyTheme = (tailwindTheme: TailwindTheme) => {
		for (let key in tailwindTheme) {
			document.documentElement.style.setProperty(key, tailwindTheme[key]);
		}
	};

	const tailwindTheme: TailwindTheme = useMemo(
		() => ({
			"--color-primary": token.colorPrimary,
			"--color-primary-active": token.colorPrimaryActive,
			"--color-primary-hover": token.colorPrimaryHover,
			"--color-bg-primary-hover": token.colorPrimaryBgHover,
			"--color-text-secondary": token.colorTextSecondary,
			"--color-text-tertiary": token.colorTextTertiary,
			"--color-bg-text-hover": token.colorBgTextHover,
			"--color-bg-container": token.colorBgContainer,
			"--color-bg-layout": token.colorBgLayout,
			"--color-bg-mask": token.colorBgMask,
			"--color-bg-primary": token.colorPrimary,
			"--color-text": token.colorText,
			"--color-text-heading": token.colorTextHeading,
			"--color-text-label": token.colorTextLabel,
			"--color-text-lightsolid": token.colorTextLightSolid,
			"--color-text-quaternary": token.colorTextQuaternary,
			"--color-text-placeholder": token.colorTextPlaceholder,
			"--color-text-description": token.colorTextDescription,
			"--color-border": token.colorBorder,
			"--color-border-secondary": token.colorBorderSecondary,
			"--color-border-primary": token.colorPrimaryBorder,
			"--color-text-primary": token.colorPrimaryText,
			"--color-error": token.colorError,
			"--color-warning": token.colorWarning,
			"--color-info": token.colorInfo,
			"--color-success": token.colorSuccess,
			"--color-error-bg": token.colorErrorBg,
			"--color-warning-bg": token.colorWarningBg,
			"--color-info-bg": token.colorInfoBg,
			"--color-success-bg": token.colorSuccessBg,
			"--color-link": token.colorLink,
			"--color-highlight": token.colorHighlight,
			'--color-fill-quaternary': token.colorFillQuaternary,
			"--color-fill-tertiary": token.colorFillTertiary,
			"--color-fill-secondary": token.colorFillSecondary
		}),
		[token]
	);

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

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