import * as React from "react";
import PropTypes from "prop-types";
import { createTheme } from "@mui/material/styles";
import Box from "@mui/material/Box";
import { AppProvider } from "@toolpad/core/AppProvider";
import { DashboardLayout } from "@toolpad/core/DashboardLayout";
import { Outlet, useLocation, useNavigate } from "react-router-dom"; // Import Outlet to render nested routes
import DashboardIcon from "@mui/icons-material/Dashboard";
import GrassIcon from "@mui/icons-material/Grass";
import ImagesearchRollerIcon from "@mui/icons-material/ImagesearchRoller";
import { FolderIcon } from "lucide-react";
import PeopleOutlineIcon from "@mui/icons-material/PeopleOutline";
import TourIcon from "@mui/icons-material/Tour";
import logo from "../assets/Images/Logo.png";

import SupportAgentIcon from "@mui/icons-material/SupportAgent";
import NotificationsActiveIcon from "@mui/icons-material/NotificationsActive";
import Navbar from "../components/navbar/page";

const navigation = [
  {
    segment: "dashboard",
    title: "Dashboard",
    icon: <DashboardIcon />,
  },
  {
    segment: "ground-manager",
    title: "Ground Manager",
    icon: <GrassIcon />,
    children: [
      {
        segment: "view-grounds",
        title: "View Grounds",
        icon: <FolderIcon />,
      },
    ],
  },
  {
    segment: "banner-manager",
    title: "Banner Manager",
    icon: <ImagesearchRollerIcon />,
    children: [
      {
        segment: "add-banners",
        title: "Add New Banner",
        icon: <FolderIcon />,
      },
      {
        segment: "view-banners",
        title: "View All Banners",
        icon: <FolderIcon />,
      },
    ],
  },
  {
    segment: "tournament-manager",
    title: "Tournament Manager",
    icon: <TourIcon />,
    children: [
      {
        segment: "add-tournament",
        title: "Add Tournament",
        icon: <FolderIcon />,
      },
      {
        segment: "view-tournament",
        title: "View Tournament",
        icon: <FolderIcon />,
      },
      {
        segment: "user-tournament/register",
        title: "Registered User",
        icon: <FolderIcon />,
      },
    ],
  },
  {
    segment: "user-manager",
    title: "User Manager",
    icon: <PeopleOutlineIcon />,
    children: [
      {
        segment: "ground-owners",
        title: "View Ground Owner ",
        icon: <FolderIcon />,
      },
      {
        segment: "user-registered",
        title: "View Users",
        icon: <FolderIcon />,
      },
    ],
  },
  {
    segment: "support-manager",
    title: "Support Manager",
    icon: <SupportAgentIcon />,
    children: [
      {
        segment: "user-support",
        title: "User Support",
        icon: <FolderIcon />,
      },
    ],
  },
  {
    segment: "notification-manager",
    title: "Notification Manager",
    icon: <NotificationsActiveIcon />,
    children: [
      {
        segment: "push-notification",
        title: "App Notification",
        icon: <FolderIcon />,
      },
    ],
  },
];

function DashboardLayoutCustomThemeSwitcher(props) {
  const { window } = props;

  // Remove this const when copying and pasting into your project.
  const demoWindow = window !== undefined ? window() : undefined;

  return (
    <>
      <Navbar />
    </>
  );
}

DashboardLayoutCustomThemeSwitcher.propTypes = {
  window: PropTypes.func,
};

DashboardLayoutCustomThemeSwitcher.propTypes = {
  window: PropTypes.func,
};

const demoTheme = createTheme({
  cssVariables: {
    colorSchemeSelector: "data-toolpad-color-scheme",
  },

  colorSchemes: { light: true },

  components: {
    MuiStack: {
      styleOverrides: {
        root: {
          display: "flex",
          alignItems: "center",
        },
      },
      
    },

    
    MuiCssBaseline: {
      styleOverrides: {
        body: {
          "& .MuiBox-root": {
            ".css-1a2ef5c": {
              marginTop: "1rem",
            },
          },
        },
      },
    },

  },

  breakpoints: {
    values: {
      xs: 0,
      sm: 600,
      md: 600,
      lg: 1200,
      xl: 1536,
    },
  },
});

function DemoPageContent({ pathname }) {
  return (
    <Box
      sx={{
        py: 4,
        display: "flex",
        flexDirection: "column",
        alignItems: "center",
        textAlign: "center",
      }}
    ></Box>
  );
}

DemoPageContent.propTypes = {
  pathname: PropTypes.string.isRequired,
};

function DashboardLayoutNavigationNested(props) {
  const { window } = props;
  const location = useLocation(); // Provides the current location
  const navigate = useNavigate();

  const router = React.useMemo(() => {
    return {
      pathname: location.pathname, // Get the current path dynamically
      navigate: (path) => navigate(path),
      searchParams: new URLSearchParams(location.search), // Parse query parameters
    };
  }, [navigate, location]);

 

  return (
    // preview-start
    <AppProvider
      navigation={navigation}
     router={router}
      theme={demoTheme}
      branding={{
        
        logo: (
        
            <img src={logo}  alt="one7sports logo" />
       
        ),
        title: "",
      }}
    >
      {/* <DashboardLayout>

      </DashboardLayout> */}

      <DashboardLayout
        slots={{
          toolbarActions: DashboardLayoutCustomThemeSwitcher,
        }}
      >
        <Box>
          <Outlet />
        </Box>
      </DashboardLayout>
    </AppProvider>
    // preview-end
  );
}

DashboardLayoutNavigationNested.propTypes = {
  /**
   * Injected by the documentation to work in an iframe.
   * Remove this when copying and pasting into your project.
   */
  window: PropTypes.func,
};

export default DashboardLayoutNavigationNested;