import React, { useEffect, useState, useRef } from 'react';
import styled from '@emotion/styled';
import { NavBar } from './NavBar';
import { Footer } from './Footer';
import { CircularProgress } from '@mui/material';
import { useLocalStore } from '@components';

const minHeight = 'calc(100vh - 30px)';

const Body = styled.div({
  display: 'flex',
  flexDirection: 'column',
  position: 'relative',
  overflow: 'hidden',
  height: '100vh',
  minHeight
});

const MainContainer = styled.div({
  display: 'flex',
  textAlign: 'center',
  width: '100%',
  flexDirection: 'row',
  height: minHeight
});

const Main = styled.div({
  background: 'linear-gradient(100deg, #f3f9ff 80%, rgba(217, 217, 217) 100%);',
  display: 'flex',
  flexDirection: 'column',
  width: '100%',
  height: minHeight
});

const Content = styled.div(({ cssProps }) => ({
  display: 'flex',
  flexDirection: 'column',
  width: '100%',
  alignContent: 'center',
  overflowY: 'auto',
  height: cssProps?.minHeightMain || '100%'
}));

export const Shell = ({ children }) => {
  const bannerRef = useRef();
  const nonContentHeight = 92 + (bannerRef?.current?.offsetHeight || 0);
  const minHeightMain = `calc(100vh - ${nonContentHeight}px)`;
  const { user, department } = useLocalStore();

  useEffect(() => {
    window.scrollTo(0,0);
  }, []);

  return (
    <div>
      {!user || !department ? (
        <Body
          style={{
            justifyContent: 'center',
            alignItems: 'center',
            color: 'grey',
          }}
        >
          <CircularProgress color="inherit" />
        </Body>
      ) : (
        <Body>
          <MainContainer id="main-container">
            <Main id="main">
              <NavBar />
              <div ref={bannerRef} />
              <Content
                cssProps={{
                  minHeightMain
                }}
                id="content"
              >
                {children}
              </Content>
            </Main>
          </MainContainer>
          <Footer />
        </Body>
      )}
    </div>
  )
}