import {ReactNode, useEffect} from 'react'
import MainLayoutProtected from '@/layouts/main-layout-protected'
import { Box, Grid} from '@mui/material'
import HomeIcon from '@mui/icons-material/Home';
import SidebarNav from '@/components/app/sidebar-nav';
import RestaurantIcon from '@mui/icons-material/Restaurant';
import ListAltIcon from '@mui/icons-material/ListAlt';
import AdminPanelSettingsIcon from '@mui/icons-material/AdminPanelSettings';
import NoteAddIcon from '@mui/icons-material/NoteAdd';
import SettingsIcon from '@mui/icons-material/Settings';
import ManageSearchIcon from '@mui/icons-material/ManageSearch';
import { useUserContext } from '@/context/UserContext';

const sideNavItems = [
  {
    title: 'Home',
    href: '/dashboard',
    icon: <HomeIcon sx={{width: '16px', height: '16px'}} />,
    subscriberRoute: false,
    adminRoute: false,
  },
  {
    title: 'Programs',
    href: '/dashboard/programs',
    icon: <ListAltIcon sx={{width: '16px', height: '16px'}}/>,
    subscriberRoute: true,
    adminRoute: false,
  },
  {
    title: 'Meal Plans',
    href: '/dashboard/meal-plans',
    icon: <RestaurantIcon sx={{width: '16px', height: '16px'}}/>,
    subscriberRoute: true,
    adminRoute: false,
  },
  {
    title: 'Create Program',
    href: '/dashboard/create-program',
    icon: <NoteAddIcon sx={{width: '16px', height: '16px'}}/>,
    subscriberRoute: false,
    adminRoute: true,
  },
  {
    title: 'Manage Programs',
    href: '/dashboard/manage-programs',
    icon: <ManageSearchIcon sx={{width: '16px', height: '16px'}}/>,
    subscriberRoute: false,
    adminRoute: true,
  },
  {
    title: 'Settings',
    href: '/dashboard/settings',
    icon: <SettingsIcon sx={{width: '16px', height: '16px'}}/>,
    subscriberRoute: false,
    adminRoute: false,
  },
  {
    title: 'Admin',
    href: '/dashboard/admin',
    icon: <AdminPanelSettingsIcon sx={{width: '16px', height: '16px'}}/>,
    subscriberRoute: false,
    adminRoute: true,
  },
]

interface DashboardLayoutProps {
  children?: ReactNode;
}

export default function DashboardLayout({
  children,
}: DashboardLayoutProps) {
  const { userData, userSessionDataLoading } = useUserContext();

  //filter the items based on the user's subscription status and admin status
  const filteredItems = () => {
    if (userData.isAdmin) return sideNavItems;
    if (userData.isSubscribed) {
      return sideNavItems.filter((item) => item.adminRoute === false);
    }
    if (!userData.isSubscribed) {
      return sideNavItems.filter((item) => item.subscriberRoute === false && item.adminRoute === false);
    }
  }
  
  return (
    <MainLayoutProtected>
      <Box
        sx={{
          minHeight: '100vh',
          maxWidth: '1400px',
          mx: 'auto',
          mt: '1.5rem'
        }}
      >
        <Grid container spacing={1} flexDirection={'row'}>
          <Grid item xs={12} md={2}>
            <SidebarNav items={filteredItems() || []} />
          </Grid>
          <Grid item xs={12} md={10}>
            {children}
          </Grid>
        </Grid>
      </Box>
    </MainLayoutProtected>
  )
}