import React, { useState, useEffect } from 'react';
import { Box, useTheme, useMediaQuery, Skeleton } from '@mui/material';
import KitchPlusAppBar from '../AppBar';
import Sidebar from '../SideHome';
import DashbordContect from './DashboardContcet';
import NoProdectDash from './NoProdectDash';

const drawerWidth = 230;

const Dashboard = () => {
  const theme = useTheme();
  const isMobile = useMediaQuery(theme.breakpoints.down('sm'));
  const [hasProducts, setHasProducts] = useState(false);
  // const [isLoading, setIsLoading] = useState(true);
  const [sidebarOpen, setSidebarOpen] = useState(!isMobile);


  useEffect(() => {
    const checkProducts = async () => {
      // setIsLoading(true);
      const productsExist = await checkIfProductsExist(); 
      setHasProducts(productsExist);
      // setIsLoading(false);
    };

    checkProducts();
  }, []);

  const checkIfProductsExist = async () => {
    return new Promise((resolve) => setTimeout(() => resolve(true), 1500)); 
  };

  useEffect(() => {
    if (window.innerWidth >= theme.breakpoints.values.md) {
      setSidebarOpen(true);
    } else {
      setSidebarOpen(false);
    }
  }, [theme.breakpoints.values.md]);

  useEffect(() => {
    const handleResize = () => {
      if (window.innerWidth >= theme.breakpoints.values.md) {
        setSidebarOpen(true);
      } else {
        setSidebarOpen(false);
      }
    };

    handleResize();
    window.addEventListener('resize', handleResize);
    return () => window.removeEventListener('resize', handleResize);
  }, [theme.breakpoints.values.md]);

  const handleDrawerToggle = () => {
    setSidebarOpen(!sidebarOpen);
  };

  return (
    <Box sx={{ display: 'flex', height: '100vh', backgroundColor: '#F6F6F6', overflow: 'hidden' }}>
      <Sidebar open={sidebarOpen} onClose={handleDrawerToggle} isMobile={isMobile} drawerWidth={drawerWidth} />

      <Box sx={{
        flexGrow: 1,
        display: 'flex',
        flexDirection: 'column',
        width: { xs: '100%', sm: '100%', md: '100%' },
        marginLeft: { xs: 0, sm: sidebarOpen ? `${drawerWidth}px` : 0, md: 0 },
        transition: theme.transitions.create(['width'], {
          easing: theme.transitions.easing.sharp,
          duration: theme.transitions.duration.leavingScreen,
        }),
      }}>
        <KitchPlusAppBar onDrawerToggle={handleDrawerToggle} sidebarOpen={sidebarOpen} isMobile={isMobile} />

        <Box sx={{
          flexGrow: 1,
          width: sidebarOpen ? 'calc(100% - 20px)' : '100%',
          // pt: { xs: 0.5, sm: 1 },
          // mt: { xs: 1, sm: 2 },
          overflowY: 'auto',
          pl: { xs: 0, sm: 2 },
          pr: { xs: 1, sm: 2 },
          pb: { xs: 1, sm: 2 },
          scrollbarWidth: 'none',
          '&::-webkit-scrollbar': { display: 'none' },
          transition: theme.transitions.create(['margin'], {
            easing: theme.transitions.easing.sharp,
            duration: theme.transitions.duration.leavingScreen,
          }),
        }}>
          {/* {isLoading ? (
            <>
              <Skeleton variant="rectangular" height={50} sx={{ mb: 2 }} />
              <Skeleton variant="rectangular" height={200} sx={{ mb: 2 }} />
              <Skeleton variant="rectangular" height={300} sx={{ mb: 2 }} />
            </>
          ) : (
            hasProducts ?
             <DashbordContect /> 
             : <NoProdectDash />
          )} */}
           <DashbordContect /> 
        </Box>
      </Box>
    </Box>
  );
};

export default Dashboard;