import { useLayoutEffect, useState } from 'react';

// MATERIAL - UI
import { useTheme } from '@mui/material/styles';
import useMediaQuery from '@mui/material/useMediaQuery';
import Box from '@mui/material/Box';
import Typography from '@mui/material/Typography';
import { FormattedMessage } from 'react-intl';
// ASSETS
import {
  Story,
  Fatrows,
  PresentionChart,
  Messenger,
  ArchiveTick,
  Messages,
  MessageSquare,
  ArchiveSlash,
  ArchiveAdd,
  MoneyArchive
} from 'iconsax-react';
// ICONS
const icons = {
  widgets: Story,
  statistics: Story,
  data: Fatrows,
  chart: PresentionChart,
  chat: Messenger,
  ArchiveIcon: ArchiveTick,
  Archive: MoneyArchive,
  Messages: MessageSquare
};

// PROJECT IMPORTS
import NavGroup from './NavGroup';
import menuItem from 'menu-items';
import { MenuFromAPI } from 'menu-items/dashboard';

import useConfig from 'hooks/useConfig';
import { HORIZONTAL_MAX_ITEM } from 'config';
import { useGetMenu, useGetMenuMaster } from 'api/menu';

// TYPES
import { NavItemType } from 'types/menu';
import { MenuOrientation } from 'types/config';

function isFound(arr: any, str: string) {
  return arr.items.some((element: any) => {
    if (element.id === str) {
      return true;
    }
    return false;
  });
}

// ==============================|| DRAWER CONTENT - NAVIGATION ||============================== //

const Navigation = () => {
  const theme = useTheme();

  const downLG = useMediaQuery(theme.breakpoints.down('lg'));

  const { menuOrientation } = useConfig();
  const { menuLoading } = useGetMenu();
  const { menuMaster } = useGetMenuMaster();
  const drawerOpen = menuMaster.isDashboardDrawerOpened;

  const [selectedItems, setSelectedItems] = useState<string | undefined>('');
  const [selectedLevel, setSelectedLevel] = useState<number>(0);
  const [menuItems, setMenuItems] = useState<{ items: NavItemType[] }>({ items: [] });

  let dashboardMenu = MenuFromAPI();

  useLayoutEffect(() => {
    if (menuLoading && !isFound(menuItem, 'group-dashboard-loading')) {
      menuItem.items.splice(0, 0, dashboardMenu);
      setMenuItems({ items: [...menuItem.items] });
    } else if (!menuLoading && dashboardMenu?.id !== undefined && !isFound(menuItem, 'group-dashboard')) {
      menuItem.items.splice(0, 1, dashboardMenu);
      setMenuItems({ items: [...menuItem.items] });
    } else {
      setMenuItems({ items: [...menuItem.items] });
    }
    // eslint-disable-next-line
  }, [menuLoading]);

  const isHorizontal = menuOrientation === MenuOrientation.HORIZONTAL && !downLG;

  const lastItem = isHorizontal ? HORIZONTAL_MAX_ITEM : null;
  let lastItemIndex = menuItems.items.length - 1;
  let remItems: NavItemType[] = [];
  let lastItemId: string;

  if (lastItem && lastItem < menuItems.items.length) {
    lastItemId = menuItems.items[lastItem - 1].id!;
    lastItemIndex = lastItem - 1;
    remItems = menuItems.items.slice(lastItem - 1, menuItems.items.length).map((item) => ({
      title: item.title,
      elements: item.children,
      icon: item.icon
    }));
  }

  // console.log('Menu Items: ', menuItems);
  const navGroups = menuItems.items.slice(0, lastItemIndex + 1).map((item) => {
    // Log the item ID

    switch (item.type) {
      case 'group':
        // Filter out children with id 'components' and check if any children remain
        item.children = item.children ? item.children.filter((child) => child.id !== 'components') : [];
        // Add a new item with id 'message' if it doesn't already exist
        if (item.children && !item.children.some((child) => child.id === 'message')) {
          item.children.push(
            {
              id: 'message',
              title: <FormattedMessage id="Messages" />, // Customize the title as needed
              type: 'item',
              icon: icons.Messages,
              url: '/apps/messages'
            },
            {
              id: 'future-message',
              title: <FormattedMessage id="Future Followups" />, // Customize the title as needed
              type: 'item',
              icon: icons.Messages,
              url: '/apps/future-followups'
            },
            {
              id: 'archived-messages',
              title: <FormattedMessage id="Archived Messages" />, // Customize the title as needed
              type: 'item',
              icon: icons.Archive,
              url: '/apps/archived-messages'
            },
            {
              id: 'auto-archived-list',
              title: <FormattedMessage id="Auto Archived List" />, // Customize the title as needed
              type: 'item',
              icon: icons.ArchiveIcon,
              url: '/apps/auto-archived'
            }
          );
        }

        return (
          <NavGroup
            key={item.id}
            setSelectedItems={setSelectedItems}
            setSelectedLevel={setSelectedLevel}
            selectedLevel={selectedLevel}
            selectedItems={selectedItems}
            lastItem={lastItem!}
            remItems={remItems}
            lastItemId={lastItemId}
            item={item}
          />
        );

      default:
        return (
          <Typography key={item.id} variant="h6" color="error" align="center">
            Fix - Navigation Group
          </Typography>
        );
    }
  });
  return (
    <Box
      sx={{
        pt: drawerOpen ? (isHorizontal ? 0 : 2) : 0,
        '& > ul:first-of-type': { mt: 0 },
        display: isHorizontal ? { xs: 'block', lg: 'flex' } : 'block',
        width: '100%'
      }}
    >
      {navGroups}
      {/* <Box> Nothing to display </Box> */}
    </Box>
  );
};

export default Navigation;