import { LoginView } from '@components/auth';
import { Footer, Header } from '@components/core';
import { Dialog, Loader } from '@components/ui';
import { useUI } from '@components/ui/context';
import { Alert, Box, Snackbar } from '@material-ui/core';
import dynamic from 'next/dynamic';
import React from 'react';

const CookieBanner = dynamic(() => import('@components/core/CookieBanner'), {
  loading: () => <Loader />,
});

const Layout: React.FC = ({ children }) => {
  const { alerts, closeModal, displayModal, modalView, removeAlert } = useUI();

  return (
    <>
      <Header />
      <Box sx={{ display: 'flex', flexDirection: 'column' }}>{children}</Box>
      <Footer />
      <CookieBanner />
      <Dialog open={displayModal} onClose={closeModal}>
        <>{modalView === 'LOGIN_VIEW' && <LoginView />}</>
      </Dialog>
      {alerts.map((alert) => (
        <Snackbar
          key={alert.id}
          autoHideDuration={5000}
          open={alert.open}
          onClose={() => removeAlert(alert.id)}
        >
          <Alert {...alert.props} onClose={() => removeAlert(alert.id)}>
            {alert.message}
          </Alert>
        </Snackbar>
      ))}
    </>
  );
};

export default Layout;