import PropTypes from 'prop-types';
import { lazy, Suspense } from 'react';
import { Outlet } from 'react-router-dom';

import { ProgressBar } from '@astryxdesign/core/ProgressBar';

// project import
import { dispatch, useSelector } from 'store';
import { openComponentDrawer } from 'store/reducers/menu';

const Header = lazy(() => import('./Header'));
const FooterBlock = lazy(() => import('./FooterBlock'));

// ==============================|| Loader ||============================== //

const Loader = () => (
  <div style={{ position: 'fixed', top: 0, left: 0, zIndex: 2001, width: '100%' }}>
    <ProgressBar label="Loading" isLabelHidden isIndeterminate />
  </div>
);

// ==============================|| MINIMAL LAYOUT ||============================== //

const CommonLayout = ({ layout = 'blank' }) => {
  const menu = useSelector((state) => state.menu);
  const { componentDrawerOpen } = menu;

  const handleDrawerOpen = () => {
    dispatch(openComponentDrawer({ componentDrawerOpen: !componentDrawerOpen }));
  };

  return (
    <>
      {(layout === 'landing' || layout === 'simple') && (
        <Suspense fallback={<Loader />}>
          <Header layout={layout} />
          <Outlet />
          <FooterBlock isFull={layout === 'landing'} />
        </Suspense>
      )}
      {layout === 'component' && (
        <Suspense fallback={<Loader />}>
          <div style={{ maxWidth: 1200, marginInline: 'auto', paddingInline: 8 }}>
            <Header handleDrawerOpen={handleDrawerOpen} layout="component" />
            <div style={{ minHeight: 64, marginBlock: 16 }} />
          </div>
        </Suspense>
      )}
      {layout === 'blank' && <Outlet />}
    </>
  );
};

CommonLayout.propTypes = {
  layout: PropTypes.string
};

export default CommonLayout;