import { useEffect } from '@wordpress/element';
import { __ } from '@wordpress/i18n';
import { useLocation } from 'react-router-dom';
import { isPro, isUltimateActive, isVendorPage } from '../Helpers';

const TEXT_DOMAIN = 'stock-sync-with-google-sheet-for-woocommerce';

const TABS = [
	{ path: '/', icon: 'ssgs-dashboard', label: __( 'Dashboard', TEXT_DOMAIN ) },
	{ path: '/settings', icon: 'ssgs-settings', label: __( 'Settings', TEXT_DOMAIN ) },
];

// Same markup and classes as the removed templates/dashboard/header.php so the existing styles apply.
const HeaderNav = ( { onOpenSupport } ) => {
	const { pathname } = useLocation();
	const showAdminLinks = ! isVendorPage();
	const hasPremiumSupport = isUltimateActive() && isPro();

	useEffect( () => {
		if ( showAdminLinks && window.Headway ) {
			window.Headway.init( {
				selector: '#ssgsw_changelogs',
				account: '7g2gGx',
				trigger: '.ssgsw_changelogs_trigger',
			} );
		}
	}, [ showAdminLinks ] );

	return (
		<div className="ssgs-admin">
			<nav className="ssgs-dashboard__header" aria-label={ __( 'FlexStock', TEXT_DOMAIN ) }>
				<ul className="ssgs-dashboard__nav">
					{ TABS.map( ( tab ) => {
						const isActive = pathname === tab.path;
						return (
							<li key={ tab.path } className={ `ssgs-dashboard__nav-link${ isActive ? ' active' : '' }` }>
								<a href={ `#${ tab.path }` } aria-current={ isActive ? 'page' : undefined }>
									<i className={ tab.icon } aria-hidden="true"></i>
									{ tab.label }
								</a>
							</li>
						);
					} ) }
				</ul>

				<ul className="ssgs-dashboard-help">
					{ showAdminLinks && (
						<li className="ssgs-support">
							{ hasPremiumSupport ? (
								<button type="button" className="ssgsw-react-link-button" onClick={ onOpenSupport }>
									<i className="ssgs-support-icon" aria-hidden="true"></i>
									{ __( 'Support', TEXT_DOMAIN ) }
								</button>
							) : (
								<a
									href="https://wordpress.org/support/plugin/stock-sync-with-google-sheet-for-woocommerce"
									target="_blank"
									rel="noreferrer"
								>
									<i className="ssgs-support-icon" aria-hidden="true"></i>
									{ __( 'Support', TEXT_DOMAIN ) }
								</a>
							) }
						</li>
					) }

					<li>
						<a href="https://lnk.wppool.dev/DrWK2f4" target="_blank" rel="noreferrer">
							<i className="ssgs-video" aria-hidden="true"></i>
							{ __( 'Video tutorial', TEXT_DOMAIN ) }
						</a>
					</li>

					{ showAdminLinks && (
						<li className={ `gradient force-flex${ isPro() ? ' no-padding' : '' }` }>
							<button type="button" className="ssgsw_changelogs_trigger ssgsw-react-link-button">
								<span aria-hidden="true">🤩</span> { __( "What's new?", TEXT_DOMAIN ) }
							</button>
							<div id="ssgsw_changelogs"></div>
						</li>
					) }
				</ul>
			</nav>
		</div>
	);
};

export default HeaderNav;