import React, { useEffect, useMemo } from 'react';
import {Sider} from './sidebar';
import {MainLayoutStyle, ContextLayoutStyle, Container, ContextStyle} from './styles';
import {YModuleProps} from './module.interface';
import { useModuleStore } from './useStore';
import Bookmark from './bookmark';

export const YModule: React.FC<YModuleProps> = ({config, children, onMenuClick}) => {
  const [state, dispatch] = useModuleStore();
  let systemState;
  if(typeof window !== 'undefined'){
    systemState = {
      userName: window.localStorage.getItem('userName') || '',
      userPhone: window.localStorage.getItem('userPhone') || '',
      isLogin: window.localStorage.getItem('token') || '',
    }
  }
  
  return (
    <MainLayoutStyle>
      {typeof window !== 'undefined' &&
      window.location.pathname.indexOf('/login') < 0 ? (
        <Sider config={config} onMenuClick={onMenuClick} />
      ) : null}
      <ContextLayoutStyle>
        <Container>
          {
            state.menus && state.menus.length && systemState?.isLogin ? (
              <Bookmark
                userId={systemState?.userPhone}
                projectId={config.moduleId}
                config={config}
              />
            ) : null
          }
          <ContextStyle>{children}</ContextStyle>
        </Container>
      </ContextLayoutStyle>
    </MainLayoutStyle>
  );
}