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

const drawerWidth = 230;

const RestaurantProfile = () => {
  const theme = useTheme();
  const isMobile = useMediaQuery(theme.breakpoints.down('sm'));
  const [hasProducts, setHasProducts] = useState(false); // حالة لتتبع وجود المنتجات
  const [sidebarOpen, setSidebarOpen] = useState(!isMobile);

  // محاكاة للتحقق من وجود المنتجات (استبدل هذا بمنطقك الفعلي)
  useEffect(() => {
    // هنا يجب استبدال هذا بمنطق فعلي للتحقق من وجود المنتجات
    // مثلاً استدعاء API أو التحقق من state
    const checkProducts = async () => {
      // محاكاة لاستدعاء API
      const productsExist = await checkIfProductsExist(); // استبدل هذه الدالة بمنطقك الفعلي
      setHasProducts(productsExist);
    };

    checkProducts();
  }, []);

  // دالة مساعدة لمحاكاة التحقق من المنتجات (استبدلها بمنطقك الفعلي)
  const checkIfProductsExist = async () => {
    // محاكاة - يمكن أن يكون هذا استدعاء لـ API أو تحقق من state
    //  return true;
    return false; // غير هذه القيمة حسب منطقك
  };

  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}
        />
        <Typography>RestaurantProfile</Typography>
      </Box>
    </Box>
  );
};

export default RestaurantProfile;