/**
 * External Dependencies.
 */
import { __ } from '@wordpress/i18n';
import { useState, useEffect } from '@wordpress/element';
import { BrowserRouter, useLocation } from 'react-router';
import { Container, Title } from '@bsf/force-ui';
import {
	BetweenHorizontalEnd,
	Palette,
	TypeOutline,
	Grid2x2Icon,
	Variable,
	HelpCircle,
	SwatchBook,
} from 'lucide-react';

/**
 * Internal dependencies.
 */
import Sidebar from '@spectra-pro-admin/global-styles/components/Sidebar';
import { GlobalStylesContext } from '@spectra-pro-admin/global-styles/helpers';
import SystemColorVars from '@spectra-pro-admin/global-styles/tabs/SystemColorVars';
import SystemSpacingVars from '@spectra-pro-admin/global-styles/tabs/SystemSpacingVars';
import SystemFontSizeVars from '@spectra-pro-admin/global-styles/tabs/SystemFontSizeVars';
import CustomVars from '@spectra-pro-admin/global-styles/tabs/CustomVars';
import CustomClasses from '@spectra-pro-admin/global-styles/tabs/CustomClasses';
import CheatSheet from '@spectra-pro-admin/global-styles/tabs/CheatSheet';
import BlockDefaults from '@spectra-pro-admin/global-styles/tabs/BlockDefaults';

/**
 * Renders the required settings.
 *
 * @since x.x.x
 *
 * @param {Object} props - The element props. 
 * @return {Element}     - The required rendered settings page.
 */
const RenderRequiredSettings = ( props ) => {
	const { currentTab } = props;

	// Render the page based on the current tab.
	switch ( currentTab ) {
		case 'colors':
			return <SystemColorVars/>;
		case 'spacing':
				return <SystemSpacingVars/>;
		case 'fontsize':
			return <SystemFontSizeVars/>;
		case 'custom-vars':
			return <CustomVars/>;
		case 'custom-classes':
			return <CustomClasses/>;
		case 'cheatsheet':
			return <CheatSheet/>;
		case 'block-defaults':
			return <BlockDefaults/>;
		default:
			return <div>{ __( 'This page does not exist.', 'spectra-pro' ) }</div>;
	}
};

/**
 * Render the settings for the Global Styles.
 *
 * @since x.x.x
 *
 * @return {Element} - The rendered settings page for the Global Styles.
 */
const Settings = () => {
	// Get the current active dashboard tab, and the active settings tab.
	const query = new URLSearchParams( useLocation()?.search );
	const activeSettings = query.get( 'settings' ) || '';
	const activeSettingsNavigationTab = activeSettings || 'colors';

	// State to identify the currently active tab.
	const [ currentTab, setCurrentTab ] = useState();

	// Create a state for all the CSS variables in the Global Styles.
	const [ allVariables, setAllVariables ] = useState( JSON.parse( window.spectra_admin_gs?.all_variables || '{}' ) );

	// Array of navigation items for the sidebar.
	const navigation = [
		{
			name: 'System Variables',
			children: [
				{
					name: __( 'Colors', 'spectra-pro' ),
					slug: 'colors',
					icon: <Palette/>,
				},
				{
					name: __( 'Spacing', 'spectra-pro' ),
					slug: 'spacing',
					icon: <BetweenHorizontalEnd/>,
				},
				{
					name: __( 'Font Size', 'spectra-pro' ),
					slug: 'fontsize',
					icon: <TypeOutline/>,
				},
			],
		},
		{
			name: 'Custom Classes & Variables',
			children: [
				{
						name: __( 'Variables', 'spectra-pro' ),
						slug: 'custom-vars',
						icon: <Variable/>,
				},
				{
						name: __( 'Classes', 'spectra-pro' ),
						slug: 'custom-classes',
						icon: <Grid2x2Icon/>,
				},
				{
						name: __( 'Block Defaults', 'spectra-pro' ),
						slug: 'block-defaults',
						icon: <SwatchBook/>,
				},
			],
		},
		{
			name: 'Miscellaneous',
			children: [
				{
						name: __( 'CheatSheet', 'spectra-pro' ),
						slug: 'cheatsheet',
						icon: <HelpCircle/>,
				},
			],
		},
	];

	// Tab titles.
	const tabTitles = {
		'colors': __( 'Colors', 'spectra-pro' ),
		'spacing': __( 'Spacing', 'spectra-pro' ),
		'fontsize': __( 'Font Sizes', 'spectra-pro' ),
		'custom-vars': __( 'Custom Variables', 'spectra-pro' ),
		'custom-classes': __( 'Custom Classes', 'spectra-pro' ),
		'cheatsheet': __( 'CheatSheet', 'spectra-pro' ),
		'block-defaults': __( 'Block Defaults', 'spectra-pro' ),
	};

	// Effect to set the current tab based on the active settings navigation tab.
	useEffect( () => {
		setCurrentTab( activeSettingsNavigationTab );
	}, [ activeSettingsNavigationTab ] );

	// Render the Global Styles settings.
	return (
		<GlobalStylesContext.Provider value={ { allVariables, setAllVariables } }>
			<Container className="lg:grid lg:grid-cols-[16rem_1fr] flex gap-4 bg-background-secondary flex-auto">
				<Sidebar navigation={ navigation } />
				{ ( 'cheatsheet' === currentTab || 'block-defaults' === currentTab ) ? (
						<RenderRequiredSettings { ...{ currentTab } }/>
				) : (
					<Container className="w-full max-w-[696px] mx-auto h-full pt-8 pr-4" direction="column" gap="xl">
						<Container align="center" justify="between">
							<Title
								className="[&_h2]:text-text-primary text-xl"
								size="md"
								title={ tabTitles[ currentTab ] || __( 'Settings', 'spectra-pro' ) }
							/>
						</Container>
						<Container
							className="bg-background-primary w-full rounded-xl shadow-sm sm:p-6 p-3 mr-3"
							direction="column"
							gap="sm"
						>
							<RenderRequiredSettings { ...{ currentTab } }/>
						</Container>
					</Container>
				) }
			</Container>
		</GlobalStylesContext.Provider>
	);
};

/**
 * Render the dashboard page for the Global Styles.
 *
 * @since x.x.x
 *
 * @return {Element} - The rendered dashboard page for the Global Styles.
 */
const Dashboard = () => (
	<BrowserRouter>
		<Settings/>
	</BrowserRouter>
);

// Export the dashboard by default.
export default Dashboard;
