// React Imports
import { useTranslations } from 'next-intl'

// MUI Imports
import { useTheme } from "@mui/material/styles";

// Third-party Imports
import PerfectScrollbar from "react-perfect-scrollbar";

// Type Imports
import type { VerticalMenuContextProps } from "@menu/components/vertical-menu/Menu";

// Component Imports
import { Menu, SubMenu, MenuItem, MenuSection } from "@menu/vertical-menu";
import CustomChip from "@core/components/mui/Chip";

// Hook Imports
import useVerticalNav from "@menu/hooks/useVerticalNav";

// Styled Component Imports
import StyledVerticalNavExpandIcon from "@menu/styles/vertical/StyledVerticalNavExpandIcon";

// Style Imports
import menuItemStyles from "@core/styles/vertical/menuItemStyles";
import menuSectionStyles from "@core/styles/vertical/menuSectionStyles";

// Menu Data Imports
// import menuData from '@/data/navigation/verticalMenuData'

type RenderExpandIconProps = {
  open?: boolean;
  transitionDuration?: VerticalMenuContextProps["transitionDuration"];
};

type Props = {
  scrollMenu: (container: any, isPerfectScrollbar: boolean) => void;
};

const RenderExpandIcon = ({
  open,
  transitionDuration,
}: RenderExpandIconProps) => (
  <StyledVerticalNavExpandIcon
    open={open}
    transitionDuration={transitionDuration}
  >
    <i className="tabler-chevron-right" />
  </StyledVerticalNavExpandIcon>
);

const VerticalMenu = ({ scrollMenu }: Props) => {
  const t = useTranslations('navigation')
  const theme = useTheme();
  const verticalNavOptions = useVerticalNav();

  // Vars
  const { isBreakpointReached, transitionDuration } = verticalNavOptions;

  const ScrollWrapper = isBreakpointReached ? "div" : PerfectScrollbar;

  return (
    // eslint-disable-next-line lines-around-comment
    /* Custom scrollbar instead of browser scroll, remove if you want browser scroll only */
    <ScrollWrapper
      {...(isBreakpointReached
        ? {
          className: "bs-full overflow-y-auto overflow-x-hidden",
          onScroll: (container) => scrollMenu(container, false),
        }
        : {
          options: { wheelPropagation: false, suppressScrollX: true },
          onScrollY: (container) => scrollMenu(container, true),
        })}
    >
      {/* Incase you also want to scroll NavHeader to scroll with Vertical Menu, remove NavHeader from above and paste it below this comment */}
      {/* Vertical Menu */}
      <Menu
        popoutMenuOffset={{ mainAxis: 23 }}
        menuItemStyles={menuItemStyles(verticalNavOptions, theme)}
        renderExpandIcon={({ open }) => (
          <RenderExpandIcon
            open={open}
            transitionDuration={transitionDuration}
          />
        )}
        renderExpandedMenuItemIcon={{
          icon: <i className="tabler-circle text-xs" />,
        }}
        menuSectionStyles={menuSectionStyles(verticalNavOptions, theme)}
      >
        <MenuItem
          href={`/dashboard`}
          icon={<i className="tabler-smart-home" />}
        >
          {t('dashboards')}
        </MenuItem>
        <MenuSection label={t('dataSection')}>
          <MenuItem href="/water-data" icon={<i className="tabler-droplet" />}>
            {t('waterData')}
          </MenuItem>
          <MenuItem href="/soil-data" icon={<i className="tabler-seedling" />}>
            {t('soilData')}
          </MenuItem>
          <MenuItem href="/crop-zoning" icon={<i className="tabler-map-2" />}>
            {t('cropZoning')}
          </MenuItem>
        </MenuSection>
        <MenuSection label={t('simulator')}>
          <MenuItem href="/plant-simulator" icon={<i className="tabler-flower" />}>
            {t('plantSimulator')}
          </MenuItem>
        </MenuSection>
        <MenuSection label={t('recommendation')}>
          <MenuItem href="/irrigation-recommendation" icon={<i className="tabler-droplet-half-2" />}>
            {t('irrigationRecommendation')}
          </MenuItem>
          <MenuItem href="/fertilization-recommendation" icon={<i className="tabler-atom-2" />}>
            {t('fertilizationRecommendation')}
          </MenuItem>
        </MenuSection>
        <MenuSection label={t('aiAssistant')}>
          <MenuItem href="/farm-ai-assistant" icon={<i className="tabler-robot" />}>
            {t('farmAiAssistant')}
          </MenuItem>
          <MenuItem href="/pest-detection" icon={<i className="tabler-bug" />}>
            {t('pestDetection')}
          </MenuItem>
        </MenuSection>

      </Menu>
      {/* <Menu
        popoutMenuOffset={{ mainAxis: 23 }}
        menuItemStyles={menuItemStyles(verticalNavOptions, theme)}
        renderExpandIcon={({ open }) => <RenderExpandIcon open={open} transitionDuration={transitionDuration} />}
        renderExpandedMenuItemIcon={{ icon: <i className='tabler-circle text-xs' /> }}
        menuSectionStyles={menuSectionStyles(verticalNavOptions, theme)}
      >
        <GenerateVerticalMenu menuData={menuData(dictionary)} />
      </Menu> */}
    </ScrollWrapper>
  );
};

export default VerticalMenu;
