import React, { useEffect } from 'react';
import {useSystemContext} from '@/system/system.context';
import {Header} from './header';
import {DesktopHeader} from './desktop/desktop.header';
import {YLayoutProps} from './layout.interface';
import {Loading} from './loading';
import { LayoutStyle } from './styles';

export const YLayout: React.FC<YLayoutProps> = ({stage, config,children, isLoading }) => {
  const {store} = useSystemContext();
  const [state] = store();
  return (
    <LayoutStyle>
      {
        stage === "common" && <Header logo={config.logo} menus={config?.menus} selectedKeys={[state.currentMenu?.name]} />
      }
      {
        stage === 'desktop' && (
          <DesktopHeader 
            logo={config.logo} 
            menus={config?.menus} 
            selectedKeys={[state.currentMenu?.name]} 
            moduleName={config?.moduleName}
            moduleId={config?.moduleId}
          />
        )
      }
      {children}
      {isLoading && <Loading.Line />}
    </LayoutStyle>
  );
};