'use client'

// Next Imports
import Link from 'next/link'
import { useTranslations } from 'next-intl'

// Third-party Imports
import classnames from 'classnames'

type DefaultSuggestionsType = {
  sectionLabelKey: string
  items: {
    labelKey: string
    href: string
    icon?: string
  }[]
}

const defaultSuggestions: DefaultSuggestionsType[] = [
  {
    sectionLabelKey: 'popularSearches',
    items: [
      { labelKey: 'analytics', href: '/dashboards/analytics', icon: 'tabler-trending-up' },
      { labelKey: 'ecommerceDashboard', href: '/dashboards/ecommerce', icon: 'tabler-shopping-cart' },
      { labelKey: 'userList', href: '/apps/user/list', icon: 'tabler-file-description' }
    ]
  },
  {
    sectionLabelKey: 'apps',
    items: [
      { labelKey: 'calendar', href: '/apps/calendar', icon: 'tabler-calendar' },
      { labelKey: 'invoiceList', href: '/apps/invoice/list', icon: 'tabler-file-info' },
      { labelKey: 'userList', href: '/apps/user/list', icon: 'tabler-file-invoice' },
      { labelKey: 'rolesPermissions', href: '/apps/roles', icon: 'tabler-lock' }
    ]
  },
  {
    sectionLabelKey: 'pages',
    items: [{ labelKey: 'userProfile', href: '/pages/user-profile', icon: 'tabler-user' }]
  },
  {
    sectionLabelKey: 'formsAndCharts',
    items: [
      { labelKey: 'formLayouts', href: '/forms/form-layouts', icon: 'tabler-layout' },
      { labelKey: 'formValidation', href: '/forms/form-validation', icon: 'tabler-checkup-list' },
      { labelKey: 'formWizard', href: '/forms/form-wizard', icon: 'tabler-git-merge' },
      { labelKey: 'apexCharts', href: '/charts/apex-charts', icon: 'tabler-chart-ppf' }
    ]
  }
]

const DefaultSuggestions = ({ setOpen }: { setOpen: (value: boolean) => void }) => {
  const t = useTranslations('search')

  return (
    <div className='flex grow flex-wrap gap-x-[48px] gap-y-8 plb-14 pli-16 overflow-y-auto overflow-x-hidden bs-full'>
      {defaultSuggestions.map((section, index) => (
        <div
          key={index}
          className='flex flex-col justify-center overflow-x-hidden gap-4 basis-full sm:basis-[calc((100%-3rem)/2)]'
        >
          <p className='text-xs leading-[1.16667] uppercase text-textDisabled tracking-[0.8px]'>
            {section.sectionLabelKey === 'popularSearches'
              ? t('popularSearches')
              : t(`sections.${section.sectionLabelKey}`)}
          </p>
          <ul className='flex flex-col gap-4'>
            {section.items.map((item, i) => (
              <li key={i} className='flex'>
                <Link
                  href={item.href}
                  className='flex items-center overflow-x-hidden cursor-pointer gap-2 hover:text-primary focus-visible:text-primary focus-visible:outline-0'
                  onClick={() => setOpen(false)}
                >
                  {item.icon && <i className={classnames(item.icon, 'flex text-xl')} />}
                  <p className='text-[15px] leading-[1.4667] truncate'>{t(`items.${item.labelKey}`)}</p>
                </Link>
              </li>
            ))}
          </ul>
        </div>
      ))}
    </div>
  )
}

export default DefaultSuggestions
