import AppFooter from '@/components/core/footer';
import { IMAGE_PATH, LAYOUT_SETTING } from '@/lib/appConstant';
import { fetchViewSettings } from '@/lib/common/fetch-view-settings';
import { STORAGE_KEYS } from '@/types/common';
import { ServiceViewSettings } from '@/types/serviceAdmin';
import { Metadata } from 'next';
import { headers } from 'next/headers';
import React from 'react';
import MainContainer from '../../components/core/main-container';
import RouterWatcher from '@/components/core/router-watcher';
import { redirect } from 'next/navigation';
import HeaderHomeLayout from '@/components/core/header/header-home-layout';
import HeaderMegreLayout from '@/components/core/header/header-megre-layout';
import HeaderSearchLayout from '@/components/core/header/header-search-layout';
type PropsType = {
  children: React.ReactNode;
};

export default async function ServiceLayout( { children }: PropsType) {
    const requestHeaders = headers();
    
    const host = requestHeaders.get(STORAGE_KEYS.domain) || '';
    const domain = host.split(':')[0];
    const servicePath = requestHeaders.get(STORAGE_KEYS.servicePath) || '';
    // const isPublicViewer = PUBLIC_PAGE.find(item => item === servicePath);
    
    const result = await fetchViewSettings();
    let viewSettings = {} as ServiceViewSettings
    let layoutViewPage: number | null = null;
    let pageMargin = {
      left: 40,
      right: 40
    }
    if (result) {
      viewSettings = result;
      layoutViewPage = viewSettings.layoutSettingResponse?.viewPage;
      if (viewSettings.layoutSettingResponse.pageMarginLeft || viewSettings.layoutSettingResponse.pageMarginLeft === 0) {
        pageMargin.left = viewSettings.layoutSettingResponse.pageMarginLeft;
      }
      if (viewSettings.layoutSettingResponse.pageMarginRight || viewSettings.layoutSettingResponse.pageMarginRight === 0) {
        pageMargin.right = viewSettings.layoutSettingResponse.pageMarginRight;
      }
    } else if (servicePath !== 'asset') {
      redirect('/error-404');
    }

    const isHomeLayout = layoutViewPage === LAYOUT_SETTING.HOME_LAYOUT.id;
    const isMegreLayout = layoutViewPage === LAYOUT_SETTING.HOME_LAYOUT_AND_SEARCH_LAYOUT.id;

    return (
      <div className='wrapper' style={isMegreLayout ? { fontFamily: "Noto Sans JP !important" } : {}}>
        {
          isHomeLayout
          ? <HeaderHomeLayout isContentDetail={false} showSidebar={true} />
          : (
            isMegreLayout
            ? <HeaderMegreLayout isContentDetail={false} />
            : <HeaderSearchLayout isContentDetail={false} />
          )
        }
        {children}
        {
          <AppFooter
            layoutViewPage={viewSettings?.layoutSettingResponse?.viewPage}
            pageLogo={viewSettings.logo}
            footerSetting={viewSettings?.footerLinkResponse || {} as any}
            pageMargin={pageMargin}
          />
        }
        {
          viewSettings && domain &&
          <MainContainer viewSettings={viewSettings} servicePath={servicePath} domain={domain}/>
        }
        <RouterWatcher/>
      </div>
    );
}

export const generateMetadata = async (): Promise<Metadata> => {
  const result = await fetchViewSettings();
  let viewSettings = {} as ServiceViewSettings
  if (result) {
    viewSettings = result;
  }
  
  let favicon: any = undefined;
  if (viewSettings.favicon) {
    const urlUpload = process.env.NEXT_PUBLIC_UPLOAD_PATH + '/';
    favicon = `${urlUpload}${IMAGE_PATH.FAVICON}${viewSettings.favicon}`;
  }
  
  if (favicon) {
    return {
      icons: {
        icon: [
          { url: favicon }
        ]
      }
    };
  }
  return { icons: undefined };
};