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

const drawerWidth = 230;

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

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

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

 useEffect(() => {
    const admin = authService.getAdminData();
    console.log('Admin Info:', admin);

    const adminId = authService.getAdminId();
    console.log('Admin ID:', adminId);
  }, []);

const admin = authService.getAdminData();
const adminId = authService.getAdminId();
  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: '100%',
          transition: theme.transitions.create(['width'], {
            easing: theme.transitions.easing.sharp,
            duration: theme.transitions.duration.leavingScreen
          }),
        }}
      >
        <KitchPlusAppBar onDrawerToggle={handleDrawerToggle} sidebarOpen={sidebarOpen} isMobile={isMobile} />

        <Box
          sx={{
            display: 'flex',
            flexDirection: 'column',
            gap: 6,
            width: { xs: '90%', sm: '95%', md: '96%' },
            pt: { xs: 2, sm: 3 },
            pl: { xs: 2, sm: 3 },
            pb: { xs: 2, sm: 4 },
            pr: { xs: 2, sm: 3 },
          }}
        >
          <Orders adminId={adminId} />
        </Box>
      </Box>
    </Box>
  );
};

export default Order;