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

const drawerWidth = 230;

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

  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: '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% - 40px)' : '100%',
          pt: { xs: 2, sm: 3 },
          overflowY: 'auto',
          pl: { xs: 2, sm: 3 },
          pb: { xs: 2, sm: 4 },
          scrollbarWidth: 'none',
          '&::-webkit-scrollbar': { display: 'none' },
          transition: theme.transitions.create(['margin'], {
            easing: theme.transitions.easing.sharp,
            duration: theme.transitions.duration.leavingScreen,
          }),
        }}>

          <AccountSettings />

        </Box>
      </Box>
    </Box>
  );
};

export default Setting;