'use client'

import React, { Suspense, useMemo } from 'react'
import { usePathname } from 'next/navigation'
import Image from 'next/image'

import '@/styles/userSidebar.scss'
import { siteConfig } from '@/config/site'
import Loading from '@/components/layouts/Loading'
import SidebarUserFooter from '@/components/layouts/SidebarUserFooter'
import SidebarNav from '@/components/layouts/sidebar/SidebarNav'
import { withBasePath } from '@/constants/images'
import { SIDEBAR_WIDTH } from '@/config/sidebar'

const Sidebar = () => {
  const pathname = usePathname()
  const accessibleMenus = useMemo(() => siteConfig().userSidebar, [])

  return (
    <div
      className="sidebar fixed start-0 z-50 hidden h-[100dvh] flex-col border-e border-secondary-40 bg-white md:flex"
      style={{ width: SIDEBAR_WIDTH }}
    >
      <div className="flex h-[76px] shrink-0 items-center justify-center border-b border-secondary-40">
        <div className="flex size-11 items-center justify-center rounded-2xl bg-primary-600 shadow-lg shadow-primary-600/20">
          <Image
            alt="قبیله"
            className="size-7 brightness-0 invert"
            height={28}
            src={withBasePath('/logo.svg')}
            width={28}
          />
        </div>
      </div>
      <div className="flex min-h-0 flex-1 flex-col justify-between pb-3">
        <div className="admin-sidebar-scroll min-h-0 flex-1 overflow-y-auto px-2 py-3">
          <SidebarNav
            compact
            items={accessibleMenus}
            pathname={pathname}
          />
        </div>
        <SidebarUserFooter />
      </div>
    </div>
  )
}

const SidebarWrapper = () => {
  return (
    <Suspense fallback={<Loading />}>
      <Sidebar />
    </Suspense>
  )
}

export default SidebarWrapper