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

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

// Component Imports
import HorizontalNav, { Menu, SubMenu, MenuItem } from '@menu/horizontal-menu'
import VerticalNavContent from './VerticalNavContent'
import CustomChip from '@core/components/mui/Chip'

// Constants
import { navigationLabels } from '@/constants/navigation'

// import { GenerateHorizontalMenu } from '@components/GenerateMenu'

// Hook Imports
import useVerticalNav from '@menu/hooks/useVerticalNav'

// Styled Component Imports
import StyledHorizontalNavExpandIcon from '@menu/styles/horizontal/StyledHorizontalNavExpandIcon'
import StyledVerticalNavExpandIcon from '@menu/styles/vertical/StyledVerticalNavExpandIcon'

// Style Imports
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'

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

type RenderExpandIconProps = {
  level?: number
}

type RenderVerticalExpandIconProps = {
  open?: boolean
  transitionDuration?: VerticalMenuContextProps['transitionDuration']
}

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

const RenderVerticalExpandIcon = ({ open, transitionDuration }: RenderVerticalExpandIconProps) => (
  <StyledVerticalNavExpandIcon open={open} transitionDuration={transitionDuration}>
    <i className='tabler-chevron-right' />
  </StyledVerticalNavExpandIcon>
)

const HorizontalMenu = () => {
  // Hooks
  const verticalNavOptions = useVerticalNav()
  const theme = useTheme()

  // Vars
  const { transitionDuration } = verticalNavOptions

  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)
        }}
      >
        <SubMenu label={navigationLabels.dashboards} icon={<i className='tabler-smart-home' />}>

          <MenuItem href={`/dashboards/analytics`} icon={<i className='tabler-trending-up' />}>
            {navigationLabels.analytics}
          </MenuItem>
          <MenuItem href={`/dashboards/ecommerce`} icon={<i className='tabler-shopping-cart' />}>
            {navigationLabels.eCommerce}
          </MenuItem>
          <MenuItem href={`/dashboards/academy`} icon={<i className='tabler-school' />}>
            {navigationLabels.academy}
          </MenuItem>
          <MenuItem href={`/dashboards/logistics`} icon={<i className='tabler-truck' />}>
            {navigationLabels.logistics}
          </MenuItem>
        </SubMenu>
        <SubMenu label={navigationLabels.apps} icon={<i className='tabler-mail' />}>
          <SubMenu label={navigationLabels.eCommerce} icon={<i className='tabler-shopping-cart' />}>
            <MenuItem href={`/apps/ecommerce/dashboard`}>{navigationLabels.dashboard}</MenuItem>
            <SubMenu label={navigationLabels.products}>
              <MenuItem href={`/apps/ecommerce/products/list`}>{navigationLabels.list}</MenuItem>
              <MenuItem href={`/apps/ecommerce/products/add`}>{navigationLabels.add}</MenuItem>
              <MenuItem href={`/apps/ecommerce/products/category`}>
                {navigationLabels.category}
              </MenuItem>
            </SubMenu>
            <SubMenu label={navigationLabels.orders}>
              <MenuItem href={`/apps/ecommerce/orders/list`}>{navigationLabels.list}</MenuItem>
              <MenuItem
                href={`/apps/ecommerce/orders/details/5434`}
                exactMatch={false}
                activeUrl='/apps/ecommerce/orders/details'
              >
                {navigationLabels.details}
              </MenuItem>
            </SubMenu>
            <SubMenu label={navigationLabels.customers}>
              <MenuItem href={`/apps/ecommerce/customers/list`}>{navigationLabels.list}</MenuItem>
              <MenuItem
                href={`/apps/ecommerce/customers/details/879861`}
                exactMatch={false}
                activeUrl='/apps/ecommerce/customers/details'
              >
                {navigationLabels.details}
              </MenuItem>
            </SubMenu>
            <MenuItem href={`/apps/ecommerce/manage-reviews`}>
              {navigationLabels.manageReviews}
            </MenuItem>
            <MenuItem href={`/apps/ecommerce/referrals`}>{navigationLabels.referrals}</MenuItem>
            <MenuItem href={`/apps/ecommerce/settings`}>{navigationLabels.settings}</MenuItem>
          </SubMenu>
          <SubMenu label={navigationLabels.academy} icon={<i className='tabler-school' />}>
            <MenuItem href={`/apps/academy/dashboard`}>{navigationLabels.dashboard}</MenuItem>
            <MenuItem href={`/apps/academy/my-courses`}>{navigationLabels.myCourses}</MenuItem>
            <MenuItem href={`/apps/academy/course-details`}>
              {navigationLabels.courseDetails}
            </MenuItem>
          </SubMenu>
          <SubMenu label={navigationLabels.logistics} icon={<i className='tabler-truck' />}>
            <MenuItem href={`/apps/logistics/dashboard`}>{navigationLabels.dashboard}</MenuItem>
            <MenuItem href={`/apps/logistics/fleet`}>{navigationLabels.fleet}</MenuItem>
          </SubMenu>
          <MenuItem
            href={`/apps/email`}
            icon={<i className='tabler-mail' />}
            exactMatch={false}
            activeUrl='/apps/email'
          >
            {navigationLabels.email}
          </MenuItem>
          <MenuItem href={`/apps/chat`} icon={<i className='tabler-message-circle-2' />}>
            {navigationLabels.chat}
          </MenuItem>
          <MenuItem href={`/apps/calendar`} icon={<i className='tabler-calendar' />}>
            {navigationLabels.calendar}
          </MenuItem>
          <MenuItem href={`/apps/kanban`} icon={<i className='tabler-copy' />}>
            {navigationLabels.kanban}
          </MenuItem>
          <SubMenu label={navigationLabels.invoice} icon={<i className='tabler-file-description' />}>
            <MenuItem href={`/apps/invoice/list`}>{navigationLabels.list}</MenuItem>
            <MenuItem
              href={`/apps/invoice/preview/4987`}
              exactMatch={false}
              activeUrl='/apps/invoice/preview'
            >
              {navigationLabels.preview}
            </MenuItem>
            <MenuItem href={`/apps/invoice/edit/4987`} exactMatch={false} activeUrl='/apps/invoice/edit'>
              {navigationLabels.edit}
            </MenuItem>
            <MenuItem href={`/apps/invoice/add`}>{navigationLabels.add}</MenuItem>
          </SubMenu>
          <SubMenu label={navigationLabels.user} icon={<i className='tabler-user' />}>
            <MenuItem href={`/apps/user/list`}>{navigationLabels.list}</MenuItem>
            <MenuItem href={`/apps/user/view`}>{navigationLabels.view}</MenuItem>
          </SubMenu>
          <SubMenu label={navigationLabels.rolesPermissions} icon={<i className='tabler-lock' />}>
            <MenuItem href={`/apps/roles`}>{navigationLabels.roles}</MenuItem>
            <MenuItem href={`/apps/permissions`}>{navigationLabels.permissions}</MenuItem>
          </SubMenu>
        </SubMenu>
        <SubMenu label={navigationLabels.pages} icon={<i className='tabler-file' />}>
          <MenuItem href={`/pages/user-profile`} icon={<i className='tabler-user-circle' />}>
            {navigationLabels.userProfile}
          </MenuItem>
          <SubMenu label={navigationLabels.miscellaneous} icon={<i className='tabler-file-info' />}>
            <MenuItem href={`/pages/misc/coming-soon`} target='_blank'>
              {navigationLabels.comingSoon}
            </MenuItem>
            <MenuItem href={`/pages/misc/under-maintenance`} target='_blank'>
              {navigationLabels.underMaintenance}
            </MenuItem>
            <MenuItem href={`/pages/misc/404-not-found`} target='_blank'>
              {navigationLabels.pageNotFound404}
            </MenuItem>
            <MenuItem href={`/pages/misc/401-not-authorized`} target='_blank'>
              {navigationLabels.notAuthorized401}
            </MenuItem>
          </SubMenu>
          <SubMenu label={navigationLabels.authPages} icon={<i className='tabler-shield-lock' />}>
            <SubMenu label={navigationLabels.login}>
              <MenuItem href={`/pages/auth/login-v1`} target='_blank'>
                {navigationLabels.loginV1}
              </MenuItem>
              <MenuItem href={`/pages/auth/login-v2`} target='_blank'>
                {navigationLabels.loginV2}
              </MenuItem>
            </SubMenu>
            <SubMenu label={navigationLabels.register}>
              <MenuItem href={`/pages/auth/register-v1`} target='_blank'>
                {navigationLabels.registerV1}
              </MenuItem>
              <MenuItem href={`/pages/auth/register-v2`} target='_blank'>
                {navigationLabels.registerV2}
              </MenuItem>
              <MenuItem href={`/pages/auth/register-multi-steps`} target='_blank'>
                {navigationLabels.registerMultiSteps}
              </MenuItem>
            </SubMenu>
            <SubMenu label={navigationLabels.verifyEmail}>
              <MenuItem href={`/pages/auth/verify-email-v1`} target='_blank'>
                {navigationLabels.verifyEmailV1}
              </MenuItem>
              <MenuItem href={`/pages/auth/verify-email-v2`} target='_blank'>
                {navigationLabels.verifyEmailV2}
              </MenuItem>
            </SubMenu>
            <SubMenu label={navigationLabels.forgotPassword}>
              <MenuItem href={`/pages/auth/forgot-password-v1`} target='_blank'>
                {navigationLabels.forgotPasswordV1}
              </MenuItem>
              <MenuItem href={`/pages/auth/forgot-password-v2`} target='_blank'>
                {navigationLabels.forgotPasswordV2}
              </MenuItem>
            </SubMenu>
            <SubMenu label={navigationLabels.resetPassword}>
              <MenuItem href={`/pages/auth/reset-password-v1`} target='_blank'>
                {navigationLabels.resetPasswordV1}
              </MenuItem>
              <MenuItem href={`/pages/auth/reset-password-v2`} target='_blank'>
                {navigationLabels.resetPasswordV2}
              </MenuItem>
            </SubMenu>
            <SubMenu label={navigationLabels.twoSteps}>
              <MenuItem href={`/pages/auth/two-steps-v1`} target='_blank'>
                {navigationLabels.twoStepsV1}
              </MenuItem>
              <MenuItem href={`/pages/auth/two-steps-v2`} target='_blank'>
                {navigationLabels.twoStepsV2}
              </MenuItem>
            </SubMenu>
          </SubMenu>
          <SubMenu label={navigationLabels.wizardExamples} icon={<i className='tabler-dots' />}>
            <MenuItem href={`/pages/wizard-examples/checkout`}>{navigationLabels.checkout}</MenuItem>
            <MenuItem href={`/pages/wizard-examples/property-listing`}>
              {navigationLabels.propertyListing}
            </MenuItem>
            <MenuItem href={`/pages/wizard-examples/create-deal`}>
              {navigationLabels.createDeal}
            </MenuItem>
          </SubMenu>
          <MenuItem href={`/pages/dialog-examples`} icon={<i className='tabler-square' />}>
            {navigationLabels.dialogExamples}
          </MenuItem>
          <SubMenu label={navigationLabels.widgetExamples} icon={<i className='tabler-chart-bar' />}>
            <MenuItem href={`/pages/widget-examples/basic`}>{navigationLabels.basic}</MenuItem>
            <MenuItem href={`/pages/widget-examples/advanced`}>{navigationLabels.advanced}</MenuItem>
            <MenuItem href={`/pages/widget-examples/statistics`}>
              {navigationLabels.statistics}
            </MenuItem>
            <MenuItem href={`/pages/widget-examples/charts`}>{navigationLabels.charts}</MenuItem>
            <MenuItem href={`/pages/widget-examples/actions`}>{navigationLabels.actions}</MenuItem>
          </SubMenu>
          <SubMenu label={navigationLabels.frontPages} icon={<i className='tabler-files' />}>
            <MenuItem href='/front-pages/landing-page' target='_blank'>
              {navigationLabels.landing}
            </MenuItem>
            <MenuItem href='/front-pages/pricing' target='_blank'>
              {navigationLabels.pricing}
            </MenuItem>
            <MenuItem href='/front-pages/payment' target='_blank'>
              {navigationLabels.payment}
            </MenuItem>
            <MenuItem href='/front-pages/checkout' target='_blank'>
              {navigationLabels.checkout}
            </MenuItem>
            <MenuItem href='/front-pages/help-center' target='_blank'>
              {navigationLabels.helpCenter}
            </MenuItem>
          </SubMenu>
        </SubMenu>
        <SubMenu label={navigationLabels.formsAndTables} icon={<i className='tabler-file-invoice' />}>
          <MenuItem href={`/forms/form-layouts`} icon={<i className='tabler-layout' />}>
            {navigationLabels.formLayouts}
          </MenuItem>
          <MenuItem href={`/forms/form-validation`} icon={<i className='tabler-checkup-list' />}>
            {navigationLabels.formValidation}
          </MenuItem>
          <MenuItem href={`/forms/form-wizard`} icon={<i className='tabler-git-merge' />}>
            {navigationLabels.formWizard}
          </MenuItem>
          <MenuItem href={`/react-table`} icon={<i className='tabler-table' />}>
            {navigationLabels.reactTable}
          </MenuItem>
          <MenuItem
            icon={<i className='tabler-checkbox' />}
            href={`${process.env.NEXT_PUBLIC_DOCS_URL}/docs/user-interface/form-elements`}
            suffix={<i className='tabler-external-link text-xl' />}
            target='_blank'
          >
            {navigationLabels.formELements}
          </MenuItem>
          <MenuItem
            icon={<i className='tabler-layout-board-split' />}
            href={`${process.env.NEXT_PUBLIC_DOCS_URL}/docs/user-interface/mui-table`}
            suffix={<i className='tabler-external-link text-xl' />}
            target='_blank'
          >
            {navigationLabels.muiTables}
          </MenuItem>
        </SubMenu>
        <SubMenu label={navigationLabels.charts} icon={<i className='tabler-chart-donut-2' />}>
          <MenuItem href={`/charts/apex-charts`} icon={<i className='tabler-chart-ppf' />}>
            {navigationLabels.apex}
          </MenuItem>
          <MenuItem href={`/charts/recharts`} icon={<i className='tabler-chart-sankey' />}>
            {navigationLabels.recharts}
          </MenuItem>
        </SubMenu>
        <SubMenu label={navigationLabels.others} icon={<i className='tabler-dots' />}>
          <MenuItem
            icon={<i className='tabler-cards' />}
            href={`${process.env.NEXT_PUBLIC_DOCS_URL}/docs/user-interface/foundation`}
            suffix={<i className='tabler-external-link text-xl' />}
            target='_blank'
          >
            {navigationLabels.foundation}
          </MenuItem>
          <MenuItem
            icon={<i className='tabler-atom' />}
            href={`${process.env.NEXT_PUBLIC_DOCS_URL}/docs/user-interface/components`}
            suffix={<i className='tabler-external-link text-xl' />}
            target='_blank'
          >
            {navigationLabels.components}
          </MenuItem>
          <MenuItem
            icon={<i className='tabler-list-search' />}
            href={`${process.env.NEXT_PUBLIC_DOCS_URL}/docs/menu-examples/overview`}
            suffix={<i className='tabler-external-link text-xl' />}
            target='_blank'
          >
            {navigationLabels.menuExamples}
          </MenuItem>
          <MenuItem
            suffix={<i className='tabler-external-link text-xl' />}
            target='_blank'
            href='https://pixinvent.ticksy.com'
            icon={<i className='tabler-lifebuoy' />}
          >
            {navigationLabels.raiseSupport}
          </MenuItem>
          <MenuItem
            suffix={<i className='tabler-external-link text-xl' />}
            target='_blank'
            icon={<i className='tabler-book-2' />}
            href={`${process.env.NEXT_PUBLIC_DOCS_URL}`}
          >
            {navigationLabels.documentation}
          </MenuItem>
          <MenuItem
            suffix={<CustomChip label='New' size='small' color='info' round='true' />}
            icon={<i className='tabler-notification' />}
          >
            {navigationLabels.itemWithBadge}
          </MenuItem>
          <MenuItem
            icon={<i className='tabler-link' />}
            href='https://pixinvent.com'
            target='_blank'
            suffix={<i className='tabler-external-link text-xl' />}
          >
            {navigationLabels.externalLink}
          </MenuItem>
          <SubMenu label={navigationLabels.menuLevels} icon={<i className='tabler-menu-2' />}>
            <MenuItem>{navigationLabels.menuLevel2}</MenuItem>
            <SubMenu label={navigationLabels.menuLevel2}>
              <MenuItem>{navigationLabels.menuLevel3}</MenuItem>
              <MenuItem>{navigationLabels.menuLevel3}</MenuItem>
            </SubMenu>
          </SubMenu>
          <MenuItem disabled>{navigationLabels.disabledMenu}</MenuItem>
        </SubMenu>
      </Menu>
      {/* <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)
        }}
      >
        <GenerateHorizontalMenu menuData={menuData(dictionary)} />
      </Menu> */}
    </HorizontalNav>
  )
}

export default HorizontalMenu
