// Next Imports
import { useParams } from 'next/navigation'

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

// Third-party Imports
import PerfectScrollbar from 'react-perfect-scrollbar'

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

// Component Imports
import { Menu, MenuItem, MenuSection, SubMenu } from '@menu/vertical-menu'

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

// 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 = {
  dictionary: Awaited<ReturnType<typeof getDictionary>>
  scrollMenu: (container: any, isPerfectScrollbar: boolean) => void
}

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

const VerticalMenu = ({ dictionary, scrollMenu }: Props) => {
  // Hooks
  const theme = useTheme()
  const verticalNavOptions = useVerticalNav()
  const params = useParams()

  // Vars
  const { isBreakpointReached, transitionDuration } = verticalNavOptions
  const { lang: locale } = params

  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)}
      >
        <SubMenu label={dictionary['navigation'].dashboards} icon={<i className='tabler-smart-home' />}>
          <MenuItem href={`/${locale}/dashboards/overview`}>{dictionary['navigation'].overview}</MenuItem>
        </SubMenu>
        <SubMenu label={dictionary['navigation'].reports} icon={<i className='tabler-report' />}>
          <MenuItem href={`/${locale}/dashboards/profit-loss`}>{dictionary['navigation'].profitloss}</MenuItem>
          <MenuItem href={`/${locale}/dashboards/products`}>{dictionary['navigation'].products}</MenuItem>
          <MenuItem href={`/${locale}/dashboards/orders`}>{dictionary['navigation'].orders}</MenuItem>
          <MenuItem href={`/${locale}/dashboards/payment-methods`}>{dictionary['navigation'].paymentMethods}</MenuItem>
          <MenuItem href={`/${locale}/dashboards/daily-report`}>{dictionary['navigation'].dailyReport}</MenuItem>
        </SubMenu>
        <MenuSection label={dictionary['navigation'].appsPages}>
          <SubMenu label={dictionary['navigation'].sales} icon={<i className='tabler-receipt-2' />}>
            <MenuItem href={`/${locale}/apps/sales/overview`}>{dictionary['navigation'].overview}</MenuItem>
            <MenuItem href={`/${locale}/apps/sales/sales-bills`}>{dictionary['navigation'].invoices}</MenuItem>
            <MenuItem href={`/${locale}/apps/sales/sales-deliveries`}>{dictionary['navigation'].deliveries}</MenuItem>
            <MenuItem href={`/${locale}/apps/sales/sales-orders`}>{dictionary['navigation'].sales_orders}</MenuItem>
            <MenuItem href={`/${locale}/apps/sales/sales-quotes`}>{dictionary['navigation'].quotes}</MenuItem>
          </SubMenu>
          <SubMenu label={dictionary['navigation'].purchase_text} icon={<i className='tabler-shopping-cart' />}>
            <MenuItem href={`/${locale}/apps/purchase/overview`}>{dictionary['navigation'].overview}</MenuItem>
            <MenuItem href={`/${locale}/apps/purchase/purchase-bills`}>
              {dictionary['navigation'].purchase_bills}
            </MenuItem>
            <MenuItem href={`/${locale}/apps/purchase/purchase-deliveries`}>
              {dictionary['navigation'].purchase_delivery}
            </MenuItem>
            <MenuItem href={`/${locale}/apps/purchase/purchase-orders`}>
              {dictionary['navigation'].purchase_orders}
            </MenuItem>
            <MenuItem href={`/${locale}/apps/purchase/purchase-quotes`}>
              {dictionary['navigation'].purchase_quotes}
            </MenuItem>
          </SubMenu>
          <MenuItem
            href={`/${locale}/apps/expense`}
            icon={<i className='tabler-cash' />}
            exactMatch={false}
            activeUrl='/apps/expense'
          >
            {dictionary['navigation'].expenses}
          </MenuItem>
          <MenuItem
            href={`/${locale}/apps/cash-bank`}
            icon={<i className='tabler-building-bank' />}
            exactMatch={false}
            activeUrl='/apps/cash-bank'
          >
            {dictionary['navigation'].cash_and_bank}
          </MenuItem>
          <MenuItem
            href={`/${locale}/apps/account`}
            icon={<i className='tabler-align-box-left-stretch' />}
            exactMatch={false}
            activeUrl='/apps/account'
          >
            {dictionary['navigation'].account}
          </MenuItem>
          <MenuItem
            href={`/${locale}/apps/fixed-assets`}
            icon={<i className='tabler-apps' />}
            exactMatch={false}
            activeUrl='/apps/fixed-assets'
          >
            {dictionary['navigation'].fixed_assets}
          </MenuItem>
          <MenuItem
            href={`/${locale}/apps/report`}
            icon={<i className='tabler-file-analytics' />}
            exactMatch={false}
            activeUrl='/apps/report'
          >
            {dictionary['navigation'].reports}
          </MenuItem>
          <SubMenu label={dictionary['navigation'].inventory} icon={<i className='tabler-salad' />}>
            <SubMenu label={dictionary['navigation'].products}>
              <MenuItem href={`/${locale}/apps/inventory/products/list`}>{dictionary['navigation'].list}</MenuItem>
              <MenuItem className='hidden' href={`/${locale}/apps/inventory/products/${params.id}/detail`}>
                {dictionary['navigation'].details}
              </MenuItem>
              <MenuItem className='hidden' href={`/${locale}/apps/inventory/products/${params.id}/edit`}>
                {dictionary['navigation'].edit}
              </MenuItem>
              <MenuItem href={`/${locale}/apps/inventory/products/add`}>{dictionary['navigation'].add}</MenuItem>
              <MenuItem href={`/${locale}/apps/inventory/products/category`}>
                {dictionary['navigation'].category}
              </MenuItem>
              <MenuItem href={`/${locale}/apps/inventory/products/units`}>{dictionary['navigation'].units}</MenuItem>
              <MenuItem href={`/${locale}/apps/inventory/products/ingredients`}>
                {dictionary['navigation'].ingredients}
              </MenuItem>
            </SubMenu>
            <SubMenu label={dictionary['navigation'].orders}>
              <MenuItem href={`/${locale}/apps/inventory/orders/list`}>{dictionary['navigation'].list}</MenuItem>
              <MenuItem className='hidden' href={`/${locale}/apps/inventory/orders/${params.id}/details`}>
                {dictionary['navigation'].details}
              </MenuItem>
            </SubMenu>
            <SubMenu label={dictionary['navigation'].customers}>
              <MenuItem href={`/${locale}/apps/inventory/customers/list`}>{dictionary['navigation'].list}</MenuItem>
            </SubMenu>
            <SubMenu label={dictionary['navigation'].stock}>
              <MenuItem href={`/${locale}/apps/inventory/stock/list`}>{dictionary['navigation'].list}</MenuItem>
              <MenuItem href={`/${locale}/apps/inventory/stock/restock`}>{dictionary['navigation'].restock}</MenuItem>
            </SubMenu>
            {/* <MenuItem href={`/${locale}/apps/inventory/settings`}>{dictionary['navigation'].settings}</MenuItem> */}
          </SubMenu>
          <SubMenu label={dictionary['navigation'].organization} icon={<i className='tabler-sitemap' />}>
            <SubMenu label={dictionary['navigation'].outlet}>
              <MenuItem href={`/${locale}/apps/organization/outlets/list`}>{dictionary['navigation'].list}</MenuItem>
            </SubMenu>
          </SubMenu>
          <SubMenu label={dictionary['navigation'].finance} icon={<i className='tabler-coins' />}>
            <SubMenu label={dictionary['navigation'].paymentMethods}>
              <MenuItem href={`/${locale}/apps/finance/payment-methods/list`}>{dictionary['navigation'].list}</MenuItem>
            </SubMenu>
          </SubMenu>
          <MenuItem
            href={`/${locale}/apps/user/list`}
            icon={<i className='tabler-user' />}
            exactMatch={false}
            activeUrl='/apps/user/list'
          >
            {dictionary['navigation'].user}
          </MenuItem>
          <MenuItem
            href={`/${locale}/apps/vendor/list`}
            icon={<i className='tabler-building' />}
            exactMatch={false}
            activeUrl='/apps/vendor/list'
          >
            {dictionary['navigation'].vendor}
          </MenuItem>
        </MenuSection>
      </Menu>
    </ScrollWrapper>
  )
}

export default VerticalMenu