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, {
	addRuleSets,
	setCheckingLogic,
	setID,
	setIsEditing,
	setTitle,
	setIsRevision,
} from '@app/modules/PersonaForm/store/PersonaFormStore';

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

// i18n.
const i18n = createI18n();

// Populate the store.
const editPersona = document.getElementById('editPersona');
const persona = JSON.parse(editPersona.dataset.persona);
const isRevision = persona.is_revision;
store.dispatch(setIsEditing(true));
store.dispatch(setID(persona.id));
store.dispatch(setTitle(persona.title));
store.dispatch(setCheckingLogic(persona.config?.checking_logic));
store.dispatch(addRuleSets(persona.config?.rules));
store.dispatch(setIsRevision(isRevision));

/**
 * Main.
 * @returns {JSX.Element}
 */
function Main() {
	return (
		<I18nProvider i18n={i18n}>
			<Provider store={store}>
				<EditPersonaForm/>
			</Provider>
		</I18nProvider>
	)
}
const mainRoot = createRoot(editPersona);
mainRoot.render(<Main />);



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

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