import {useMemo} from "react";
import {__} from "@wordpress/i18n";
import {NavLink, Outlet, useLocation} from "react-router-dom";
import SaveChanges from "./components/SaveChanges";

const items = [
	{
		slug: '/',
		name: __('Dashboard', 'advanced-fields-for-elementor-forms'),
	},
	{
		slug: '/elements',
		name: __('Form Elements', 'advanced-fields-for-elementor-forms'),
	}
];

function Layout() {

	const {pathname} = useLocation();

	const isHomePage = useMemo(() => pathname === '/', [pathname]);

	return (
		<form
			id={'hulk-settings-form'}
			className={'hulk-settings-form'}
			encType={'multipart/form-data'}
			method={'post'}
			noValidate
			action=""
		>
			<div className="hulk-settings-nav">
				<ul className="hulk-nav-list">
					{items.map(({slug, name}) => (
						<li key={`nav-item-${slug}`} className="hulk-nav-item">
							<NavLink
								to={slug}
								className={({isActive}) => isActive ? 'hulk-nav-link hulk-link-active' : 'hulk-nav-link'}
							>{name}</NavLink>
						</li>
					))}
					{/*{!freemius.can_use_premium_code && (
						<li className="hulk-nav-item">
							<Button
								variant="tertiary"
								size="default"
								icon={external}
								className={'ml-4'}
								type={'button'}
								onClick={(e: React.MouseEvent<HTMLButtonElement>) => {
									e.preventDefault();
									window.open(upgradeUrl, '_blank');
								}}
							>
								{__('Get Pro', 'advanced-fields-for-elementor-forms')}
							</Button>
						</li>
					)}*/}
				</ul>
				<div className="hulk-nav-last">
					<div className="hulk-save-btn-wrap">
						<SaveChanges/>
					</div>
				</div>
			</div>
			<Outlet/>
			{!isHomePage && (
				<div className="hulk-save-btn-wrap">
					<SaveChanges/>
				</div>
			)}
		</form>
	)
}

export default Layout