/**
 * View Mode Context (responsive design).
 *
 * @package Sideconvo
 */

import {
	createContext,
	useContext,
	useState,
	useEffect,
	ReactNode,
} from '@wordpress/element';

interface ViewModeContextType {
	isMobileView: boolean;
	isRTL: boolean;
}

const ViewModeContext = createContext< ViewModeContextType | undefined >(
	undefined
);

interface ViewModeProviderProps {
	children: ReactNode;
}

/**
 * View Mode Provider component.
 *
 * @param {ViewModeProviderProps} props Component props.
 * @return {JSX.Element} Provider component.
 */
export function ViewModeProvider( { children }: ViewModeProviderProps ) {
	const [ isMobileView, setIsMobileView ] = useState( false );
	const [ isRTL, setIsRTL ] = useState( false );

	useEffect( () => {
		// Check if mobile view.
		const checkMobileView = () => {
			setIsMobileView( window.innerWidth < 782 ); // WordPress admin breakpoint.
		};

		// Check RTL.
		const checkRTL = () => {
			setIsRTL(
				document.documentElement.getAttribute( 'dir' ) === 'rtl'
			);
		};

		// Initial check.
		checkMobileView();
		checkRTL();

		// Add resize listener.
		window.addEventListener( 'resize', checkMobileView );

		return () => {
			window.removeEventListener( 'resize', checkMobileView );
		};
	}, [] );

	const value = {
		isMobileView,
		isRTL,
	};

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

/**
 * Use view mode hook.
 *
 * @return {ViewModeContextType} View mode context.
 */
export function useViewMode(): ViewModeContextType {
	const context = useContext( ViewModeContext );
	if ( context === undefined ) {
		throw new Error( 'useViewMode must be used within ViewModeProvider' );
	}
	return context;
}