import { createRoot } from 'react-dom/client';
import { HashRouter } from 'react-router-dom';
import MyAccountApp from './Frontend/App/MyAccountApp';
import SingleProductApp from './Frontend/App/SingleProductApp';
import FloatingWidget from './Frontend/App/FloatingWidget';
import { FrontendProvider } from './Frontend/App/FrontendContext';
import RewardCouponsTable from './Frontend/components/RewardCouponsTable';
import RewardPointsTable from './Frontend/components/RewardPointsTable';
import ShareEmailWidget from './Frontend/components/elementor/ShareEmailWidget';
import ReferralTableWidget from './Frontend/components/elementor/ReferralTableWidget';
import RewardCouponsTableWidget from './Frontend/components/elementor/RewardCouponsTableWidget';
import RewardPointsTableWidget from './Frontend/components/elementor/RewardPointsTableWidget';
import ReferralCardWidget from './Frontend/components/elementor/ReferralCardWidget';
import ReferralCardBlock from './Frontend/components/blocks/ReferralCardBlock';
import ShareEmailBlock from './Frontend/components/blocks/ShareEmailBlock';
import ReferralTableBlock from './Frontend/components/blocks/ReferralTableBlock';
import RewardCouponsTableBlock from './Frontend/components/blocks/RewardCouponsTableBlock';
import RewardPointsTableBlock from './Frontend/components/blocks/RewardPointsTableBlock';
import ReferralTable from './Frontend/components/ReferralTable';
import ReferralCard from './Frontend/components/ReferralCard';
import ShareEmail from './Frontend/components/ShareEmail';
import './styles/frontend.css';
import MenuIconAppender from './Frontend/components/MenuIconAppender';


document.addEventListener("DOMContentLoaded", () => {
		const rootElementMyAccount = document.getElementById('ecre_my_account_dashboard');
		const rootElementSingleProduct = document.querySelectorAll('.ecre_single_product_dashboard');
		const rootElementFloatingWidget = document.getElementById('ecre_floating_widget_root');
		//Shortcodes
		const rootElementRewardTable = document.querySelectorAll('.ecre_reward_table_shortcode');
		const rootElementRewardPointTable = document.querySelectorAll('.ecre_reward_point_table_shortcode');
		const rootElementInviteTableShortcode = document.querySelectorAll('.ecre_invition_table_shortcode');
		const rootElementReferralCardShortcode = document.querySelectorAll('.ecre_referral_card_shortcode');
		const rootElementReferralEmailInviteShortcode = document.querySelectorAll('.ecre_referral_email_invite_shortcode');

		//Elementor widgets
		const rootElementEmailInviteWidget = document.querySelectorAll('.ecre_email_invite_widget');
		const rootElementInviteCouponsWidget = document.querySelectorAll('.ecre_invition_table_widget');
		const rootElementRewardCouponWidget = document.querySelectorAll('.ecre_reward_coupon_widget');
		const rootElementRewardPointWidget = document.querySelectorAll('.ecre_reward_point_widget');
		const rootElementReferralCardWidget = document.querySelectorAll('.ecre_referral_card_widget');

		//GutenBurg blocks
		const rootElementsReferralCardBlock = document.querySelectorAll('.ecre_referral_cardblock');
		const rootElementReferralEmailBlock = document.querySelectorAll('.ecre_referral_share_email_block');
		const rootElementReferralCouponBlock = document.querySelectorAll('.ecre_referral_coupon_block');
		const rootElementRewardCouponBlock = document.querySelectorAll('.ecre_reward_coupon_block');
		const rootElementRewardPointBlock = document.querySelectorAll('.ecre_reward_point_block');
		const accountNavigationElement = document.querySelector('.woocommerce-MyAccount-navigation');
        

		if (rootElementMyAccount) {
			const myAccountRoot = createRoot(rootElementMyAccount);
			myAccountRoot.render(<FrontendProvider><MyAccountApp /></FrontendProvider>);
		}


        rootElementSingleProduct.forEach((rootElement, index) => {
            const singleProductRoot = createRoot(rootElement);
            singleProductRoot.render(
                <FrontendProvider>
                   <SingleProductApp />
                </FrontendProvider>
            );
        });


		if(  ( ecreFrontend.is_pro_latest && ecreFrontend.is_pro_activated ) || !ecreFrontend.is_pro_activated ) {
			if (rootElementFloatingWidget) {
				const FloatingWidgetRoot = createRoot(rootElementFloatingWidget);
				FloatingWidgetRoot.render(  <FrontendProvider><FloatingWidget /></FrontendProvider>);
			}

		} 

		if (accountNavigationElement) {
			const independentRoot = document.createElement('div');
			accountNavigationElement.appendChild(independentRoot);
			const independentRootElement = createRoot(independentRoot);
			independentRootElement.render(
			  <FrontendProvider>
				<MenuIconAppender />
			  </FrontendProvider>
			);
		}


    rootElementsReferralCardBlock.forEach((rootElement, index) => {

        const settingsData = rootElement.getAttribute('data-settings');

        const parsedSettings = settingsData ? JSON.parse(settingsData) : {};

        const referralCardBlockEl = createRoot(rootElement);
        referralCardBlockEl.render(
            <FrontendProvider>
                <ReferralCardBlock settings_mx={parsedSettings} />
            </FrontendProvider>
        );
    });

    rootElementReferralEmailBlock.forEach((rootElement, index) => {

        const settingsData = rootElement.getAttribute('data-settings');

        const parsedSettings = settingsData ? JSON.parse(settingsData) : {};

        const referralCardBlockEl = createRoot(rootElement);
        referralCardBlockEl.render(
            <FrontendProvider>
                <ShareEmailBlock settings_mx={parsedSettings} />
            </FrontendProvider>
        );
    });

    rootElementReferralCouponBlock.forEach((rootElement, index) => {

        const settingsData = rootElement.getAttribute('data-settings');

        const parsedSettings = settingsData ? JSON.parse(settingsData) : {};

        const referralCardBlockEl = createRoot(rootElement);
        referralCardBlockEl.render(
            <FrontendProvider>
                <ReferralTableBlock settings_mx={parsedSettings} />
            </FrontendProvider>
        );
    });

    rootElementRewardCouponBlock.forEach((rootElement, index) => {

        const settingsData = rootElement.getAttribute('data-settings');

        const parsedSettings = settingsData ? JSON.parse(settingsData) : {};

        const referralCardBlockEl = createRoot(rootElement);
        referralCardBlockEl.render(
            <FrontendProvider>
                <RewardCouponsTableBlock settings_mx={parsedSettings} />
            </FrontendProvider>
        );
    });

    rootElementRewardPointBlock.forEach((rootElement, index) => {

        const settingsData = rootElement.getAttribute('data-settings');

        const parsedSettings = settingsData ? JSON.parse(settingsData) : {};

        const referralCardBlockEl = createRoot(rootElement);
        referralCardBlockEl.render(
            <FrontendProvider>
                <RewardPointsTableBlock settings_mx={parsedSettings} />
            </FrontendProvider>
        );
    });

    rootElementEmailInviteWidget.forEach((rootElement, index) => {

        const settingsData = rootElement.getAttribute('data-settings');

        const parsedSettings = settingsData ? JSON.parse(settingsData) : {};

        const referralCardBlockEl = createRoot(rootElement);
        referralCardBlockEl.render(
            <FrontendProvider>
                <ShareEmailWidget settings_mx={parsedSettings} />
            </FrontendProvider>
        );
    });


    rootElementInviteCouponsWidget.forEach((rootElement, index) => {

        const settingsData = rootElement.getAttribute('data-settings');

        const parsedSettings = settingsData ? JSON.parse(settingsData) : {};

        const referralCardBlockEl = createRoot(rootElement);
        referralCardBlockEl.render(
            <FrontendProvider>
                <ReferralTableWidget settings_mx={parsedSettings} />
            </FrontendProvider>
        );
    });


    rootElementRewardCouponWidget.forEach((rootElement, index) => {

        const settingsData = rootElement.getAttribute('data-settings');

        const parsedSettings = settingsData ? JSON.parse(settingsData) : {};

        const referralCardBlockEl = createRoot(rootElement);
        referralCardBlockEl.render(
            <FrontendProvider>
                <RewardCouponsTableWidget settings_mx={parsedSettings} />
            </FrontendProvider>
        );
    });

    rootElementRewardPointWidget.forEach((rootElement, index) => {

        const settingsData = rootElement.getAttribute('data-settings');

        const parsedSettings = settingsData ? JSON.parse(settingsData) : {};

        const referralCardBlockEl = createRoot(rootElement);
        referralCardBlockEl.render(
            <FrontendProvider>
                <RewardPointsTableWidget settings_mx={parsedSettings} />
            </FrontendProvider>
        );
    });


    rootElementReferralCardWidget.forEach((rootElement, index) => {

        const settingsData = rootElement.getAttribute('data-settings');

        const parsedSettings = settingsData ? JSON.parse(settingsData) : {};

        const referralCardBlockEl = createRoot(rootElement);
        referralCardBlockEl.render(
            <FrontendProvider>
                <ReferralCardWidget settings_mx={parsedSettings} />
            </FrontendProvider>
        );
    });


	//Shortcodes
    rootElementRewardTable.forEach((rootElement, index) => {
        const referralCardBlockEl = createRoot(rootElement);
        referralCardBlockEl.render(
            <FrontendProvider>
                <RewardCouponsTable />
            </FrontendProvider>
        );
    });

    rootElementRewardPointTable.forEach((rootElement, index) => {
        const referralCardBlockEl = createRoot(rootElement);
        referralCardBlockEl.render(
            <FrontendProvider>
                <RewardPointsTable />
            </FrontendProvider>
        );
    });


    rootElementInviteTableShortcode.forEach((rootElement, index) => {
        const referralCardBlockEl = createRoot(rootElement);
        referralCardBlockEl.render(
            <FrontendProvider>
                <ReferralTable />
            </FrontendProvider>
        );
    });


    rootElementReferralCardShortcode.forEach((rootElement, index) => {
        const referralCardBlockEl = createRoot(rootElement);
        referralCardBlockEl.render(
            <FrontendProvider>
                <ReferralCard />
            </FrontendProvider>
        );
    });


    rootElementReferralEmailInviteShortcode.forEach((rootElement, index) => {
        const referralCardBlockEl = createRoot(rootElement);
        referralCardBlockEl.render(
            <FrontendProvider>
                <ShareEmail />
            </FrontendProvider>
        );
    });


});


