/**
 * External dependencies.
 */
import { NavLink, useNavigate } from 'react-router-dom'
import { Disclosure } from '@headlessui/react'
import classNames from 'clsx';
import SettingsButtons from '../templates/SettingsButtons';
import { useSettingsDirty } from '../../context/SettingsDirtyContext';

/**
 * Internal dependencies.
 */
const pluginState = window.openAssetPluginState;

const Header = ({ navigation, secondaryNav = null, onSave = null, onRun = null, isLoading = null }) => {
	const navigate = useNavigate();
	const { isDirty } = useSettingsDirty();

	const handleNavLinkClick = (event, href) => {
		// Get state directly from context
		// const isDirty = getIsChildDirty();
		// console.log('Header: handleNavLinkClick. isDirty:', isDirty);

		// --- TEMPORARY TEST --- 
		// Always prevent default and show confirm to test functionality
		// event.preventDefault(); 
		// const leave = window.confirm(
		// 	`TEST DIALOG: Dirty state is ${isDirty}. Leave page?`
		// );
		// console.log('TEST DIALOG: User chose leave =', leave);
		// if (leave) {
		// 	setTimeout(() => navigate(href), 0);
		// }
		// --- END TEMPORARY TEST ---

		/* --- Original Logic (commented out) --- */ // Re-enable original logic
		if (isDirty) {
			event.preventDefault();

			const leave = window.confirm(
				'You have unsaved changes. Are you sure you want to leave?'
			);

			if (leave) {
				setTimeout(() => navigate(href), 0);
			}
		}
		/* --- END Original Logic --- */
	};

	return (
		<Disclosure
			as='nav'
			className='bg-white relative sm:sticky sm:top-[32px] sm:z-50'
		>
			{({ open }) => (
				<>
					<div className='mx-auto max-w-6xl px-4 sm:px-6 lg:px-8'>
						<div className='flex flex-shrink-0 items-center justify-between pt-6 pb-4'>
							<div className='flex gap-2 items-center mb-4 mt-4'>
								<img
									src={pluginState.assetsURL + "/img/OpenAsset_logo.svg"}
									alt='OpenAsset Logo'
									width='200px'
								/>
							</div>
						</div>
						<div
							id='header-buttons'
							className='flex justify-between border-b border-solid border-border-primary max-w-none sm:max-w-[80%]'
						>
							{navigation && (
								<div className='flex'>
									<div className='flex space-x-2'>
										{navigation.map((item) => (
											<NavLink
												key={item.name}
												to={item.href}
												onClick={(e) => handleNavLinkClick(e, item.href)}
												className={({ isActive }) =>
													classNames(
														isActive
															? ""
															: "bg-[#DCDCDE] text-[#aeaeae]",
														"inline-flex items-center border-solid border border-border-primary p-2 text-base shadow-none border-b-2 text-[#51575D]"
													)
												}
											>
												{item.name}
											</NavLink>
										))}
									</div>
								</div>
							)}
							{secondaryNav && (
								<div className='flex'>
									<div className='hidden sm:-my-px sm:ml-6 sm:flex sm:space-x-6'>
										{secondaryNav.map((item) => (
											<NavLink
												key={item.name}
												to={item.href}
												className='inline-flex items-center px-1.5 pt-1 text-base shadow-none text-gray-500 hover:text-gray-800'
											>
												{item.icon && (
													<item.icon className='h-4 w-4 mr-1.5 ' />
												)}
												{item.name}
											</NavLink>
										))}
									</div>
								</div>
							)}
							{onSave && onRun && (
							<div className='hidden sm:flex'>
								<SettingsButtons
									onSave={onSave}
									onRun={onRun}
									isLoading={isLoading}
								/>
							</div>
							)}
						</div>
					</div>
				</>
			)}
		</Disclosure>
	);
}

export default Header;