import type { ReactNode } from 'react';
import { useEffect } from 'react';

import { MobileApp } from '@/components/ui/mobile';
import { getClosestBrandColorClass } from '@/config';
import useAppConfigStore from '@/stores/appConfig';

interface AppConfigShellProps {
    children: ReactNode;
}

export function AppConfigShell({ children }: AppConfigShellProps) {
    const isMobile = useAppConfigStore((state) => state.isMobile);
    const isIOS = useAppConfigStore((state) => state.isIOS);
    const color = useAppConfigStore((state) => state.data.color);
    const loadInit = useAppConfigStore((state) => state.loadInit);
    const setIsMobile = useAppConfigStore((state) => state.setIsMobile);

    useEffect(() => {
        setIsMobile(window.innerWidth < 768);
        loadInit();
    }, [loadInit, setIsMobile]);

    if (isMobile) {
        return (
            <MobileApp
                className={getClosestBrandColorClass(color)}
                theme={isIOS ? 'ios' : 'material'}
            >
                {children}
            </MobileApp>
        );
    }

    return children;
}
