import "./styles/index.scss";
import {useEffect} from "react";
import {__} from "@wordpress/i18n";
import {Button} from "@wordpress/components";
import {external} from "@wordpress/icons";
import ErrorBoundary from "../../components/ErrorBoundary";
import localizeSettings from "./types/localizeSettings";
import Notice from "./components/Notice";
import {HashRouter, Route, Routes} from "react-router-dom";
import Layout from "./Layout";
import FormElements from "./pages/FormElements";
import NoMatch from "./pages/NoMatch";
import Dashboard from "./pages/Dashboard";
import UpgradeButton from "../../components/UpgradeButton";

let logoUrl = `${localizeSettings.PLUGIN_DIR_URL}assets/images/logo-fresh.svg`;

if (localizeSettings.adminColor === 'modern') {
	logoUrl = `${localizeSettings.PLUGIN_DIR_URL}assets/images/logo-modern.svg`;
}

const App = ({element}: { element: HTMLElement }) => {

	useEffect(() => {
		if (element) {
			element.classList.add('init-active');
		}
	}, [element]);

	return (
		<ErrorBoundary>
			<div className="hulk-settings-wrap">
				<div className="hulk-settings-header">
					<div className="flex flex-wrap items-center w-full">
						<div className="p-2 flex-grow pl-0">
							<div className="hulk-brand">
								<figure className={'hulk-logo'}>
									<img
										src={logoUrl}
										alt="Hulk Plugins"
										width={32}
									/>
								</figure>
								<h2 className="hulk-heading">
									{__('Advanced Fields For Elementor Forms by', 'advanced-fields-for-elementor-forms')}&nbsp;
									<a href="https://hulkplugins.com" target={'_blank'} rel="noreferrer">
										{__('Hulk Plugins', 'advanced-fields-for-elementor-forms')}
									</a>
								</h2>
							</div>
						</div>
						<div className="p-2">
							<Button
								type={'button'}
								size={'compact'}
								variant={'secondary'}
								target={'_blank'}
								href={localizeSettings.DEMO}
								icon={external}
							>
								{__('View Demos', 'advanced-fields-for-elementor-forms')}
							</Button>
						</div>
						<div className="p-2">
							<UpgradeButton/>
						</div>
						<div className="p-2">
							<div className="hulk-settings-version">{localizeSettings.VERSION}</div>
						</div>
					</div>
				</div>
				<div className="hulk-settings-body">
					<HashRouter>
						<Routes>
							<Route path="/" element={<Layout/>}>
								<Route index element={<Dashboard/>}/>
								<Route path={'elements'} element={<FormElements/>}/>
								<Route path="*" element={<NoMatch/>}/>
							</Route>
						</Routes>
					</HashRouter>
				</div>
				<Notice/>
			</div>
		</ErrorBoundary>
	)
}

export default App