// ** MUI Imports
import { styled } from '@mui/material/styles';
import Box from '@mui/material/Box';
import { Badge, Button, IconButton, Stack, Typography } from '@mui/material';
import { useRouter } from 'next/router';
import HomeIcon from '@mui/icons-material/Home';
import { CartConsumer, CartContext, CartProvider } from 'src/contexts/cart';
import { useContext, useEffect, useState } from 'react';
import CartIcon from './components/CartIcon';
import AccountBoxIcon from '@mui/icons-material/AccountBox';
import CheckSession from 'src/api/checkSession';
import { AuthContext, AuthProvider } from 'src/contexts/auth';

// Styled component for Blank Layout component
const ShopfrontLayoutWrapper = styled(Box)(({ theme }) => ({
  height: '100vh',

  // For V1 Blank layout pages
  '& .content-center': {
    display: 'flex',
    minHeight: '100vh',
    alignItems: 'center',
    justifyContent: 'center',
    padding: theme.spacing(5),
  },

  // For V2 Blank layout pages
  '& .content-right': {
    display: 'flex',
    minHeight: '100vh',
    overflowX: 'hidden',
    position: 'relative',
  },
}));

const ShopfrontLayout = ({ children }) => {
  const router = useRouter();
  const [data, setData] = useState({});
  const { username, setUsername } = useContext(AuthContext);

  useEffect(() => {
    const check = async () => {
      try {
        let { session } = JSON.parse(localStorage.getItem('session')) || '';

        let data = await CheckSession({ session });
        if (data['status'] != 'OK') {
          return route.replace('/shopfront/login');
        } else {
          setData(data);
          setUsername(data['username']);
        }
      } catch (error) {}
    };

    return check();
  }, []);

  return (
    <CartProvider>
      <ShopfrontLayoutWrapper className="layout-wrapper">
        <Box className="app-content" sx={{ minHeight: '100vh', overflowX: 'hidden', position: 'relative' }}>
          <Stack direction="column" alignItems={'center'} justifyContent={'center'}>
            <Box sx={{ width: '80vw' }}>
              <Stack direction="column">
                <Stack direction="row" justifyContent={'space-between'} alignItems={'center'} minHeight={'10vh'}>
                  <Box style={{ width: 'calc ( 80vw / 3 )' }}>
                    <Typography variant="h5">Hi, {username || 'Guest'}</Typography>
                  </Box>
                  <Box style={{ width: 'calc ( 80vw / 3 )' }}>
                    <Typography variant="h5">VTKH Mall</Typography>
                  </Box>

                  <Box style={{ width: 'calc ( 80vw / 3 )' }}>
                    <IconButton
                      onClick={() => {
                        router.push('/shopfront/customer/profile');
                      }}
                    >
                      <AccountBoxIcon />
                    </IconButton>
                    <IconButton
                      onClick={() => {
                        router.push('/shopfront');
                      }}
                    >
                      <HomeIcon />
                    </IconButton>

                    <CartIcon />
                  </Box>
                </Stack>
                {children}
                <Box height={'5rem'}></Box>
              </Stack>
            </Box>
          </Stack>
        </Box>
      </ShopfrontLayoutWrapper>
    </CartProvider>
  );
};

export default ShopfrontLayout;
