RestaurantDash/src/components/Home/CreateYourRestaurant/CreateRestaurant.js

import React, { useState, useEffect } from 'react';
import { Box, useTheme, useMediaQuery } from '@mui/material';
import KitchPlusAppBar from '../AppBar';
import Sidebar from '../SideHome';
import CloudKitchenProject from './contcet/CloudKitchenProject';
import OperationalDetails from './contcet/OperationalDetails';
import RequiredEquipments from './contcet/RequiredEquipments';
import VisualIdentity from './contcet/VisualIdentity';
import Budget from './contcet/Budget';
import AdditionalSupport from './contcet/AdditionalSupport';
import AdditionalNotes from './contcet/AdditionalNotes';
import SideProfile from './SideProfile';

const drawerWidth = 230;

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

  // ⬇️ إدارة الخطوة الحالية
  const [currentStep, setCurrentStep] = useState(0);

  const steps = [
    <CloudKitchenProject onNext={() => setCurrentStep(currentStep + 1)} onBack={() => setCurrentStep(currentStep - 1)} />,
    <OperationalDetails onNext={() => setCurrentStep(currentStep + 1)} onBack={() => setCurrentStep(currentStep - 1)} />,
    <RequiredEquipments onNext={() => setCurrentStep(currentStep + 1)} onBack={() => setCurrentStep(currentStep - 1)} />,
    <VisualIdentity onNext={() => setCurrentStep(currentStep + 1)} onBack={() => setCurrentStep(currentStep - 1)} />,
    <Budget onNext={() => setCurrentStep(currentStep + 1)} onBack={() => setCurrentStep(currentStep - 1)} />,
    <AdditionalSupport onNext={() => setCurrentStep(currentStep + 1)} onBack={() => setCurrentStep(currentStep - 1)} />,
    <AdditionalNotes onBack={() => setCurrentStep(currentStep - 1)} />,
  ];

  useEffect(() => {
    const checkProducts = async () => {
      const productsExist = await checkIfProductsExist();
      setHasProducts(productsExist);
    };
    checkProducts();
  }, []);

  const checkIfProductsExist = async () => {
    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}
        />
        <Box>
          <Box sx={{
            display: 'flex', height: '100vh',

          }}>
            <Box sx={{
              height: '100vh',
              ml: 3,
              mb: 2,
              width: { md: '30%' },
              display: { xs: 'none', sm: 'none', md: 'block' },
              overflowY: 'auto',
              scrollbarWidth: 'none',
              '&::-webkit-scrollbar': {
                display: 'none',
              },
            }}>

              <Box sx={{
                minHeight: '100%', pb: 15, pt: 3,

              }}>
                <SideProfile
                  currentStepIndex={currentStep}
                  onBack={() => setCurrentStep(prev => Math.max(prev - 1, 0))}
                />


              </Box>
            </Box>

            <Box sx={{
              ml: { xs: 2, md: 3 },

              flexGrow: 1,
              height: '100vh',
              pr: { sm: 2, md: 1 },

              pt: 3,
              mb: { sm: 20 },
              width: { md: '60%' }, display: { xs: 'block', sm: 'block', md: 'block' },
              overflowY: 'auto',
              scrollbarWidth: 'none',
              '&::-webkit-scrollbar': {
                display: 'none',
              },
            }}>
              <Box sx={{
                minHeight: '100%', pb: 18,

              }}>
                {steps[currentStep]}
              </Box>
            </Box>
          </Box>
        </Box>
      </Box>
    </Box>
  );
};


export default CreateRestaurant;