import Divider from "@mui/material/Divider";
import Box from "@mui/material/Box";
import React, { useEffect } from "react";
import List from "@mui/material/List";
import ListItemButton from "@mui/material/ListItemButton";
import ListItemText from "@mui/material/ListItemText";
import ListItemIcon from "@mui/material/ListItemIcon";
import WorkHistory from "@mui/icons-material/WorkHistory";
import Dashboard from "@mui/icons-material/Dashboard";
import SummarizeIcon from "@mui/icons-material/Summarize";
import PaymentsIcon from "@mui/icons-material/Payments";
import AccountTreeIcon from "@mui/icons-material/AccountTree";
import RequestQuote from "@mui/icons-material/RequestQuote";
import PeopleIcon from "@mui/icons-material/People";
import Task from "@mui/icons-material/Task";
import Assignment from "@mui/icons-material/Assignment";
import Settings from "@mui/icons-material/Settings";
import Analytics from "@mui/icons-material/Analytics";
import Payments from "@mui/icons-material/Payments";
import { useTranslation } from "react-i18next";
import Typography from "@mui/material/Typography";
import { usePathname } from "next/navigation";
import Link from "next/link";
import { NAVIGATION_CONTENT_WIDTH } from "@/config/uiConfig";
import Logo from "../Logo";

interface NavigationItem {
  icon: React.ReactNode;
  label: string;
  path: string;
  children?: NavigationItem[];
  isHidden?: true | undefined
}

const NavigationContent: React.FC = () => {
  const navigationItems: NavigationItem[] = [
    {
      icon: <Dashboard />,
      label: ("Dashboard"),
      path: "/dashboard",
    },
    {
      icon: <RequestQuote />,
      label: "Raw Material",
      path: "",
      children: [
        {
          icon: <RequestQuote />,
          label: "Purchase Order",
          path: "/po",
        },
        {
          icon: <RequestQuote />,
          label: "Pick Order",
          path: "/pickOrder",
        },
        // {
        //   icon: <RequestQuote />,
        //   label: "Cons. Pick Order",
        //   path: "",
        // },
        // {
        //   icon: <RequestQuote />,
        //   label: "Delivery Pick Order",
        //   path: "",
        // },
        // {
        //   icon: <RequestQuote />,
        //   label: "Warehouse",
        //   path: "",
        // },
        // {
        //   icon: <RequestQuote />,
        //   label: "Location Transfer Order",
        //   path: "",
        // },
        {
          icon: <RequestQuote />,
          label: "View item In-out And inventory Ledger",
          path: "/inventory",
        },
      ],
    },
    // {
    //   icon: <RequestQuote />,
    //   label: "Production",
    //   path: "",
    //   children: [
    //     {
    //       icon: <RequestQuote />,
    //       label: "Job Order",
    //       path: "",
    //     },
    //     {
    //       icon: <RequestQuote />,
    //       label: "Job Order Traceablity ",
    //       path: "",
    //     },
    //     {
    //       icon: <RequestQuote />,
    //       label: "Work Order",
    //       path: "",
    //     },
    //     {
    //       icon: <RequestQuote />,
    //       label: "Work Order Traceablity ",
    //       path: "",
    //     },
    //   ],
    // },
    // {
    //   icon: <RequestQuote />,
    //   label: "Quality Control Log",
    //   path: "",
    //   children: [
    //     {
    //       icon: <RequestQuote />,
    //       label: "Quality Control Log",
    //       path: "",
    //     },
    //   ],
    // },
    {
      icon: <RequestQuote />,
      label: "Delivery",
      path: "",
      children: [
        {
          icon: <RequestQuote />,
          label: "Delivery Order",
          path: "/do",
        },
      ],
    },
    // {
    //   icon: <RequestQuote />,
    //   label: "Report",
    //   path: "",
    //   children: [
    //     {
    //       icon: <RequestQuote />,
    //       label: "report",
    //       path: "",
    //     },
    //   ],
    // },
    // {
    //   icon: <RequestQuote />,
    //   label: "Recipe",
    //   path: "",
    //   children: [
    //     {
    //       icon: <RequestQuote />,
    //       label: "FG Recipe",
    //       path: "",
    //     },
    //     {
    //       icon: <RequestQuote />,
    //       label: "SFG Recipe",
    //       path: "",
    //     },
    //     {
    //       icon: <RequestQuote />,
    //       label: "Recipe",
    //       path: "",
    //     },
    //   ],
    // },
    {
      icon: <RequestQuote />,
      label: "Scheduling",
      path: "",
      children: [
        {
          icon: <RequestQuote />,
          label: "Demand Forecast",
          path: "/scheduling/rough",
        },
        {
          icon: <RequestQuote />,
          label: "Detail Scheduling",
          path: "/scheduling/detail",
        },
      ],
    },
    {
      icon: <RequestQuote />,
      label: "Settings",
      path: "",
      children: [
        {
          icon: <RequestQuote />,
          label: "User",
          path: "/settings/user",
        },
        {
          icon: <RequestQuote />,
          label: "User Group",
          path: "/settings/user",
        },
        // {
        //   icon: <RequestQuote />,
        //   label: "Material",
        //   path: "/settings/material",
        // },
        // {
        //   icon: <RequestQuote />,
        //   label: "By-product",
        //   path: "/settings/byProduct",
        // },
        {
          icon: <RequestQuote />,
          label: "Items",
          path: "/settings/items",
        },
        {
          icon: <RequestQuote />,
          label: "Demand Forecast Setting",
          path: "/settings/rss",
        },
        {
          icon: <RequestQuote />,
          label: "Equipment Type",
          path: "/settings/user",
        },
        {
          icon: <RequestQuote />,
          label: "Equipment",
          path: "/settings/user",
        },
        {
          icon: <RequestQuote />,
          label: "Warehouse",
          path: "/settings/user",
        },
        {
          icon: <RequestQuote />,
          label: "Supplier",
          path: "/settings/user",
        },
        {
          icon: <RequestQuote />,
          label: "Customer",
          path: "/settings/user",
        },
        {
          icon: <RequestQuote />,
          label: "QC Check Item",
          path: "/settings/qcItem",
        },
        {
          icon: <RequestQuote />,
          label: "QC Category",
          path: "/settings/qcCategory",
        },
        {
          icon: <RequestQuote />,
          label: "QC Check Template",
          path: "/settings/user",
        },
        {
          icon: <RequestQuote />,
          label: "Mail",
          path: "/settings/mail",
        },
        {
          icon: <RequestQuote />,
          label: "Import Testing",
          path: "/settings/m18ImportTesting",
        },
      ],
    },
  ];
  const { t } = useTranslation("common");
  const pathname = usePathname();

  const [openItems, setOpenItems] = React.useState<string[]>([]);
  const toggleItem = (label: string) => {
    setOpenItems((prevOpenItems) =>
      prevOpenItems.includes(label)
        ? prevOpenItems.filter((item) => item !== label)
        : [...prevOpenItems, label],
    );
  };

  const renderNavigationItem = (item: NavigationItem) => {
    const isOpen = openItems.includes(item.label);

    return (
      <Box
        key={`${item.label}-${item.path}`}
        component={Link}
        href={item.path}
        sx={{ textDecoration: "none", color: "inherit" }}
      >
        <ListItemButton
          selected={pathname.includes(item.label)}
          onClick={() => item.children && toggleItem(item.label)}
        >
          <ListItemIcon>{item.icon}</ListItemIcon>
          <ListItemText primary={t(item.label)} />
        </ListItemButton>
        {item.children && isOpen && (
          <List sx={{ pl: 2 }}>
            {item.children.map((child) => (!child.isHidden && renderNavigationItem(child)))}
          </List>
        )}
      </Box>
    );
  };

  return (
    <Box sx={{ width: NAVIGATION_CONTENT_WIDTH }}>
      <Box sx={{ p: 3, display: "flex" }}>
        <Logo height={60} />
        {/* <button className="float-right bg-transparent border-transparent" >
          <ArrowCircleLeftRoundedIcon className="text-slate-400 hover:text-blue-400 hover:cursor-pointer " style={{ fontSize: '35px' }} />
        </button> */}
      </Box>
      <Divider />
      <List component="nav">
        {navigationItems.map((item) => renderNavigationItem(item))}
        {/* {navigationItems.map(({ icon, label, path }, index) => {
          return (
            <Box
              key={`${label}-${index}`}
              component={Link}
              href={path}
              sx={{ textDecoration: "none", color: "inherit" }}
            >
              <ListItemButton selected={pathname.includes(path)}>
                <ListItemIcon>{icon}</ListItemIcon>
                <ListItemText primary={t(label)} />
              </ListItemButton>
            </Box>
          );
        })} */}
      </List>
    </Box>
  );
};

export default NavigationContent;