/**
 * External dependencies.
 */
import {
	createContext,
	useState,
	useContext,
	useEffect,
} from "@wordpress/element";

/**
 * Internal dependencies.
 */
import { fetchPluginConfig } from "../api/settings";

// Default plugin configuration with fallbacks
const defaultPluginConfig = {
	pluginUrl: "/wp-content/plugins/openasset/",
	apiRoute: "",
	assetsURL: "",
	version: "",
	checkCredentials: false,
	redirectTo: "",
};

// Create the plugin context
const PluginContext = createContext(defaultPluginConfig);

/**
 * Custom hook to use the plugin context
 */
export const usePluginConfig = () => {
	const context = useContext(PluginContext);
	if (!context) {
		throw new Error(
			"usePluginConfig must be used within a PluginConfigProvider"
		);
	}
	return context;
};

/**
 * Provider component for plugin configuration
 */
export const PluginConfigProvider = ({ children }) => {
	// Initialize with default values
	const [pluginConfig, setPluginConfig] = useState(() => {
		// Initially try to use data from window if available (for backward compatibility)
		if (window.pluginData) {
			return {
				...defaultPluginConfig,
				pluginUrl:
					window.pluginData.pluginUrl ||
					defaultPluginConfig.pluginUrl,
			};
		}

		if (window.openAssetPluginState) {
			return {
				...defaultPluginConfig,
				apiRoute:
					window.openAssetPluginState.apiRoute ||
					defaultPluginConfig.apiRoute,
				assetsURL:
					window.openAssetPluginState.assetsURL ||
					defaultPluginConfig.assetsURL,
				version:
					window.openAssetPluginState.version ||
					defaultPluginConfig.version,
				checkCredentials:
					window.openAssetPluginState.checkCredentials ||
					defaultPluginConfig.checkCredentials,
				redirectTo:
					window.openAssetPluginState.redirectTo ||
					defaultPluginConfig.redirectTo,
			};
		}

		return defaultPluginConfig;
	});

	// Load plugin configuration from the server
	useEffect(() => {
		// This function would be implemented in your API module
		// to fetch plugin configuration from an endpoint
		if (typeof fetchPluginConfig === "function") {
			fetchPluginConfig()
				.then((config) => {
					setPluginConfig((prevConfig) => ({
						...prevConfig,
						...config,
					}));
				})
				.catch((error) => {
					console.error(
						"Error fetching plugin configuration:",
						error
					);
				});
		}
	}, []);

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

export default PluginContext;