import React, { useState, useEffect } from 'react';
import { Box, useTheme, useMediaQuery, Snackbar, Alert } 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';
import authService from '../../../services/authService';

const { createNewRestaurant } = authService;
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 [snackbarOpen, setSnackbarOpen] = useState(false);
  const [currentStep, setCurrentStep] = useState(0);

  // إدارة بيانات النموذج لجميع الخطوات (مشاركة البيانات بين الخطوات)
  const [formData, setFormData] = useState({

  });

  // دالة لتحديث بيانات النموذج بشكل مرن (دمج الجديد مع القديم)
  const updateFormData = (newData) => {
    setFormData(prev => ({
      ...prev,
      ...newData,
    }));
  };


  // دالة لإغلاق السناك بار
  const handleSnackbarClose = (event, reason) => {
    if (reason === 'clickaway') return;
    setSnackbarOpen(false);
  };

  const handleSubmit = async () => {
    try {
      await createNewRestaurant(formData);
      setSnackbarOpen(true);
    } catch (error) {
      console.error(error);

    }
  };

  const steps = [
    <CloudKitchenProject
      key="step-0"
      formData={formData}
      updateFormData={updateFormData}
      onNext={() => setCurrentStep(prev => Math.min(prev + 1, steps.length - 1))}
      onBack={() => setCurrentStep(prev => Math.max(prev - 1, 0))}
    />,
    <OperationalDetails
      key="step-1"
      formData={formData}
      updateFormData={updateFormData}
      onNext={() => setCurrentStep(prev => Math.min(prev + 1, steps.length - 1))}
      onBack={() => setCurrentStep(prev => Math.max(prev - 1, 0))}
    />,
    <RequiredEquipments
      key="step-2"
      formData={formData}
      updateFormData={updateFormData}
      onNext={() => setCurrentStep(prev => Math.min(prev + 1, steps.length - 1))}
      onBack={() => setCurrentStep(prev => Math.max(prev - 1, 0))}
    />,
    <VisualIdentity
      key="step-3"
      formData={formData}
      updateFormData={updateFormData}
      onNext={() => setCurrentStep(prev => Math.min(prev + 1, steps.length - 1))}
      onBack={() => setCurrentStep(prev => Math.max(prev - 1, 0))}
    />,
    <Budget
      key="step-4"
      formData={formData}
      updateFormData={updateFormData}
      onNext={() => setCurrentStep(prev => Math.min(prev + 1, steps.length - 1))}
      onBack={() => setCurrentStep(prev => Math.max(prev - 1, 0))}
    />,
    <AdditionalNotes
      key="step-5"
      formData={formData}
      updateFormData={updateFormData}
      onBack={() => setCurrentStep(prev => Math.max(prev - 1, 0))}
      onSubmit={handleSubmit}
    />

  ];


  // 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>


      <Snackbar
        open={snackbarOpen}
        autoHideDuration={4000}
        onClose={handleSnackbarClose}
        anchorOrigin={{ vertical: 'bottom', horizontal: 'center' }}
      >
        <Alert onClose={handleSnackbarClose} severity="success" sx={{ width: '100%' }}>
          عملية إنشاء المطعم تمت بنجاح
        </Alert>
      </Snackbar>
    </Box>
  );
};

export default CreateRestaurant;