import {createRoot} from 'react-dom/client';
import {I18nProvider} from '@wordpress/react-i18n';
import {createI18n} from '@wordpress/i18n';
import {Provider} from 'react-redux';

// State Provider.
import store from '@app/modules/PersonaForm/store/PersonaFormStore';

// Components.
import AddPersonaForm from '@app/modules/PersonaForm/components/AddPersonaForm';
import PersonaFormFooter from "@app/modules/PersonaForm/components/PersonaFormFooter";

// i18n.
const i18n = createI18n();

/**
 * Main.
 * @returns {JSX.Element}
 */
function Main() {
	return (
		<I18nProvider i18n={i18n}>
			<Provider store={store}>
				<AddPersonaForm />
			</Provider>
		</I18nProvider>
	)
}

const mainRoot = createRoot(document.getElementById('audience-new'));
mainRoot.render(<Main/>);

/**
 * Footer.
 *
 * @returns {JSX.Element}
 */
function Footer() {
	return (
		<I18nProvider i18n={i18n}>
			<Provider store={store}>
				<PersonaFormFooter />
			</Provider>
		</I18nProvider>
	)
}

const footerRoot = createRoot(document.getElementById('wpfooter'));
footerRoot.render(<Footer/>);
wpfooter.classList.add('!dxp-block', 'max-md:!dxp-ml-0', '!dxp-fixed');