// 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, MenuItem } from '@menu/vertical-menu'

// 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'
import { useLocale, useTranslations } from 'next-intl'

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) => {
  // Hooks
  const theme = useTheme()
  const verticalNavOptions = useVerticalNav()
  const locale = useLocale()

  // Vars
  const { isBreakpointReached, transitionDuration } = verticalNavOptions

  const ScrollWrapper = isBreakpointReached ? 'div' : PerfectScrollbar

  const t = useTranslations('MENU_ITEMS')
  const menuItems = [
    {
      href: `/${locale}`,
      icon: <i className='tabler-home' />,
      label: t('Home')
    },
    {
      href: `/${locale}/categories`,
      icon: <i className='tabler-category' />,
      label: t('Categories')
    },
    {
      href: `/${locale}/products`,
      icon: <i className='tabler-shopping-bag' />,
      label: t('Products')
    },
    {
      href: `/${locale}/products/featuredproducts`,
      icon: <i className='tabler-star' />,
      label: t('featuredproducts')
    },
    {
      href: `/${locale}/tables`,
      icon: <i className='tabler-desk' />,
      label: t('tables')
    },
    {
      href: `/${locale}/orders`,
      icon: <i className='tabler-receipt-2' />,
      label: t('orders')
    },
    {
      href: `/${locale}/payment-methods`,
      icon: <i className='tabler-credit-card' />,
      label: t('paymentMethods')
    },
    {
      href: `/${locale}/profile`,
      icon: <i className='tabler-user' />,
      label: t('Profile')
    }
  ]

  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)}
      >
        {menuItems.map(item => (
          <MenuItem key={item?.href} href={item?.href} icon={item?.icon}>
            {item?.label}
          </MenuItem>
        ))}
      </Menu>
    </ScrollWrapper>
  )
}

export default VerticalMenu