"use client"
import { useEffect } from 'react';
import { getLayoutViewPage, setCompanyDomain, setServicePath, setViewSettings } from '@/lib/redux/features/serviceAdmin';
import { useAppDispatch, useAppSelector } from '@/lib/redux/hooks';
import { useAuthCheck } from '@/hooks/useAuthCheck';
import { ServiceViewSettings } from '@/types/serviceAdmin';
import { AUTHEN_TYPES, LAYOUT_SETTING, PaymentMethod, SETTING_LOGIN } from '@/lib/appConstant';
import StorageHelper from '@/lib/storeHelper';
import { doLogin, getAuthInfo } from '@/lib/redux/features/auth';
import { useMounted } from '@/hooks/useMounted';
import { STORAGE_KEYS } from '@/types/common';
import { useRouter, useSearchParams } from 'next/navigation';
import { getUserTrace } from '@/lib/utils';

const Multipayment = (window as any).Multipayment;
export default function MainContainer({
  // children,
  viewSettings,
  servicePath,
  domain
}: Readonly<{
  viewSettings: ServiceViewSettings;
  servicePath: string;
  domain: string;
}>) {
  const router = useRouter();
  const mounted = useMounted();
  const dispatch = useAppDispatch();
  const searchParams = useSearchParams();
  const authInfo = useAppSelector(getAuthInfo);
  const layoutViewPage = useAppSelector(getLayoutViewPage);
  
  useAuthCheck({ domain, servicePath });
  
  const userStore = !servicePath || servicePath === '' ? domain : servicePath;
  const search = mounted ? window.location.search : '';
  const token = StorageHelper.getCookie(userStore);
  const isMegreLayout = layoutViewPage === LAYOUT_SETTING.HOME_LAYOUT_AND_SEARCH_LAYOUT.id;
  const isGMOPayment = viewSettings.paymentGateway === PaymentMethod.GMO;
  const loginSetting = viewSettings.settingLogin;
  const gakkenCode = searchParams.get('code');
  
  useEffect(() => {
    StorageHelper.setSessionItem(STORAGE_KEYS.domain, domain);
    StorageHelper.setSessionItem(STORAGE_KEYS.servicePath, servicePath);
    dispatch(setServicePath(servicePath));
    dispatch(setCompanyDomain(domain));
    dispatch(setViewSettings(viewSettings));
    
  }, []);
  
  useEffect(() => {
    if (viewSettings.settingLogin && mounted) {
      const isRequireLogin = viewSettings.settingLogin === SETTING_LOGIN.LOGINREQUIRE.value;

      const searchParams = new URLSearchParams(search);
      
      const userIdSearch = searchParams.get('UserID');
      if (!authInfo && isRequireLogin && !token && !userIdSearch && window && !window.location.pathname.includes('login') &&!gakkenCode) {
        const cacheLoginMobileApp = StorageHelper.getCookie(STORAGE_KEYS.cacheLoginMobileApp);
        router.push(`${servicePath ? '/' + servicePath : ''}/login${(cacheLoginMobileApp || userIdSearch) ? '?is_login_mobile_app=true' : ''}`);
      }
    }
  }, [authInfo, mounted, token]);
  useEffect(() => {
    if (authInfo && authInfo.shopId && isGMOPayment && Multipayment) {
      Multipayment.init(authInfo.shopId);
    }
  }, [authInfo, Multipayment]);
  useEffect(() => {
    if (isMegreLayout && mounted) {
      document.body.style.fontFamily = 'Noto Sans JP';
    }
  }, [isMegreLayout, mounted]);

  return <div></div>;
}