import { GoogleTranslateWidget } from '@frontend/components/language/google-translate-widget';
import { Footer } from '@frontend/components/layout/Footer';
import { HeadAssets } from '@frontend/components/layout/HeadAssets';
import { Header } from '@frontend/components/layout/Header';
import { frontendPageHead } from '@frontend/content/frontend-page-head';
import { usePagePlugins } from '@frontend/hooks/use-page-plugins';
import { restoreBrandLogo, watchBrandLogo } from '@frontend/lib/brand-logo';
import { initSiteHeader } from '@frontend/lib/init-site-header';
import { router, usePage } from '@inertiajs/react';
import { type ReactNode, useEffect, useRef } from 'react';

type MarketingShellProps = {
    children: ReactNode;
};

export function MarketingShell({ children }: MarketingShellProps) {
    const { component } = usePage();
    const head = frontendPageHead[component] ?? {};
    const contentRef = useRef<HTMLDivElement>(null);

    useEffect(() => {
        restoreBrandLogo();
        watchBrandLogo();
        initSiteHeader().catch(console.error);
    }, []);

    usePagePlugins(contentRef);

    useEffect(() => {
        return router.on('success', () => {
            restoreBrandLogo();

            const preloader = document.getElementById('preloader');

            if (preloader) {
                preloader.style.display = 'none';
            }
        });
    }, []);

    return (
        <>
            <HeadAssets {...head} />
            <div className="main-wrapper">
                <Header />
                <div ref={contentRef} key={component}>
                    {children}
                </div>
                <Footer />
            </div>
            <div className="scroll-top-percentage">
                <span id="scroll-value"></span>
            </div>
            <GoogleTranslateWidget />
        </>
    );
}