import { Container, Text, Title } from '@bsf/force-ui';
import { useSelect } from '@wordpress/data';
import { STORE_NAME } from '@AdminStore/constants';
import { InfoTooltip } from './tooltip';
import { useCallback, useEffect } from '@wordpress/element';

const PageHeader = ( {
	title = '',
	description = '',
	icon: Icon = null,
	secondaryButton = null,
	info_tooltip = null,
} ) => {
	const { unsavedSettings } = useSelect( ( select ) => {
		const { getUnsavedSettings } = select( STORE_NAME );
		return {
			unsavedSettings: getUnsavedSettings() || {},
		};
	}, [] );

	const hasUnsavedSettings = Object.keys( unsavedSettings || {} ).length > 0;

	// Handle navigation warning for unsaved changes
	const handleBeforeUnload = useCallback(
		( event ) => {
			event.preventDefault();
			event.returnValue = '';
		},
		[ unsavedSettings ]
	);

	useEffect( () => {
		if ( ! hasUnsavedSettings ) {
			return;
		}
		window.addEventListener( 'beforeunload', handleBeforeUnload );
		return () => {
			window.removeEventListener( 'beforeunload', handleBeforeUnload );
		};
	}, [ handleBeforeUnload, hasUnsavedSettings ] );

	return (
		<div className="flex items-center justify-between gap-3 flex-1">
			<Container direction="column" className="gap-0.5">
				<Container direction="row" className="gap-2">
					<Title
						className="[&_h2]:text-text-primary [&_h2]:leading-[1.875rem]"
						title={ title }
						icon={
							!! Icon && (
								<Icon className="size-5 text-text-primary" />
							)
						}
						iconPosition="left"
						size="md"
					/>
					{ /* Added the InfoTooltip next to the Title */ }
					{ info_tooltip && (
						<div className="mt-[7px]">
							<InfoTooltip
								content={ info_tooltip }
								interactive={ true }
							/>
						</div>
					) }
				</Container>
				<Text size={ 14 } weight={ 400 } color="secondary">
					{ description }
				</Text>
			</Container>

			{ !! secondaryButton && secondaryButton }
		</div>
	);
};

export default PageHeader;
