// components/HorizontalMenu.tsx
'use client'

import { useTheme } from '@mui/material/styles'
import HorizontalNav, { Menu, MenuItem } from '@menu/horizontal-menu'
import VerticalNavContent from './VerticalNavContent'
import { useLocale, useTranslations } from 'next-intl'
import type { VerticalMenuContextProps } from '@menu/components/vertical-menu/Menu'
import useVerticalNav from '@menu/hooks/useVerticalNav'
import StyledHorizontalNavExpandIcon from '@menu/styles/horizontal/StyledHorizontalNavExpandIcon'
import StyledVerticalNavExpandIcon from '@menu/styles/vertical/StyledVerticalNavExpandIcon'
import menuItemStyles from '@core/styles/horizontal/menuItemStyles'
import menuRootStyles from '@core/styles/horizontal/menuRootStyles'
import verticalNavigationCustomStyles from '@core/styles/vertical/navigationCustomStyles'
import verticalMenuItemStyles from '@core/styles/vertical/menuItemStyles'
import verticalMenuSectionStyles from '@core/styles/vertical/menuSectionStyles'

const RenderExpandIcon = ({ level }: { level?: number }) => (
  <StyledHorizontalNavExpandIcon level={level}>
    <i className='tabler-chevron-right' />
  </StyledHorizontalNavExpandIcon>
)

const RenderVerticalExpandIcon = ({
  open,
  transitionDuration
}: {
  open?: boolean
  transitionDuration?: VerticalMenuContextProps['transitionDuration']
}) => (
  <StyledVerticalNavExpandIcon open={open} transitionDuration={transitionDuration}>
    <i className='tabler-chevron-right' />
  </StyledVerticalNavExpandIcon>
)

const HorizontalMenu = () => {
  const verticalNavOptions = useVerticalNav()
  const theme = useTheme()
  const { transitionDuration } = verticalNavOptions
  const t = useTranslations('MENU_ITEMS')
  const locale = useLocale()
  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 (
    <HorizontalNav
      switchToVertical
      verticalNavContent={VerticalNavContent}
      verticalNavProps={{
        customStyles: verticalNavigationCustomStyles(verticalNavOptions, theme),
        backgroundColor: 'var(--mui-palette-background-paper)'
      }}
    >
      <Menu
        rootStyles={menuRootStyles(theme)}
        renderExpandIcon={({ level }) => <RenderExpandIcon level={level} />}
        menuItemStyles={menuItemStyles(theme, 'tabler-circle')}
        renderExpandedMenuItemIcon={{ icon: <i className='tabler-circle text-xs' /> }}
        popoutMenuOffset={{
          mainAxis: ({ level }) => (level && level > 0 ? 14 : 12),
          alignmentAxis: 0
        }}
        verticalMenuProps={{
          menuItemStyles: verticalMenuItemStyles(verticalNavOptions, theme),
          renderExpandIcon: ({ open }) => (
            <RenderVerticalExpandIcon open={open} transitionDuration={transitionDuration} />
          ),
          renderExpandedMenuItemIcon: { icon: <i className='tabler-circle text-xs' /> },
          menuSectionStyles: verticalMenuSectionStyles(verticalNavOptions, theme)
        }}
      >
        {menuItems.map(item => (
          <MenuItem key={item.href} href={item.href} icon={item.icon}>
            {item.label}
          </MenuItem>
        ))}
      </Menu>
    </HorizontalNav>
  )
}

export default HorizontalMenu