/**
 * External dependencies.
 */
import { createContext } from '@wordpress/element';
import { __ } from '@wordpress/i18n';

/**
 * Internal dependencies.
 */
import Dashboard from '@spectra-pro-admin/global-styles/dashboard';

// The Global Styles Context.
export const GlobalStylesContext = createContext( {
	allVariables: {},
	setAllVariables: null,
} );

/**
 * Add the Global Styles Menu Item to the menu array of the Spectra dashboard.
 *
 * @since x.x.x
 *
 * @param {Array} menu - The menu array. 
 * @return {Array}     - The updated menu array.
 */
export const addGlobalStylesMenuItem = ( menu ) => {
	// Get the localized admin.
	const spectraLocalizedAdmin = window?.uag_react || {};

	// If the homeslug is not set, abandon ship.
	if ( ! spectraLocalizedAdmin?.home_slug ) {
		return menu;
	}

	// Push an item to the menu for the global styles.
	menu.splice( 3, 0, {
		name: __( 'Global Styles', 'spectra-pro' ),
		slug: spectraLocalizedAdmin.home_slug,
		path: 'global-styles',
	} );

	// Return the updated menu.
	return menu;
};

/**
 * Render the required settings page based on the path the Global Styles Menu Item to the menu array of the Spectra dashboard.
 *
 * @since x.x.x
 *
 * @param {Element} DefaultPage - The default page to render.
 * @param {string}  path        - The path of the current route.
 * @return {Element}            - Either the Global Styles dashboard, or the default page.
 */
export const RenderGlobalStylesRoute = ( DefaultPage, path ) => ( path === 'global-styles' ? <Dashboard/> : <DefaultPage/> );