import Link from 'next/link'
import { useRouter } from 'next/router'
import { useEffect, useState } from 'react'

export const Menu = () => {
	const router = useRouter()
	const { pathname } = router
	const [menus, setMenus] = useState([])

	useEffect(() => {
		setMenus(JSON.parse(localStorage.getItem('menus')))
	}, [])

	const renderMenu = (target) => {
		let ready = Object.keys(menus).find((data) => data === target)
		if (!ready) return false
		return true
	}

	return (
		<div className='navbar-detail 2xl:px-16 bg-biru2 h-12 flex items-center justify-center shadow'>
			<div className='menu flex 2xl:gap-x-14 gap-x-10 2xl:text-base text-sm'>
				<Link href={'/dashboard'}>
					<div
						className={`hover:text-hitam hover:bg-yellow cursor-pointer px-3 py-1 rounded ${
							pathname.startsWith('/dashboard') ? 'bg-yellow' : 'text-white'
						}`}
						hidden={!renderMenu('dashboard')}
					>
						<i className='pi pi-home mr-1' />
						Dashboard
					</div>
				</Link>
				<div
					className={`hover:text-hitam hover:bg-yellow cursor-pointer px-3 py-1 rounded relative dropdown-toggle ${
						pathname.startsWith('/referensi') ? 'bg-yellow' : 'text-white'
					}`}
					hidden={!renderMenu('referensi')}
				>
					<i className='pi pi-database mr-1' />
					Referensi
					<div className='absolute rounded bg-biru2 w-max min-w-full 2xl:top-8 top-7 -left-0 py-3 z-10 flex flex-col gap-y-1 shadow dropdown-menu'>
						<Link href={'/referensi/jenis-tagihan'}>
							<div
								className={`hover:text-hitam hover:bg-yellow px-3 py-1 ${
									pathname === '/referensi/jenis-tagihan' ? 'bg-yellow' : 'text-white'
								}`}
								hidden={!renderMenu('referensi/jenis-tagihan')}
							>
								Jenis Tagihan
							</div>
						</Link>
						<Link href={'/referensi/jenis-belanja'}>
							<div
								className={`hover:text-hitam hover:bg-yellow px-3 py-1 ${
									pathname === '/referensi/jenis-belanja' ? 'bg-yellow' : 'text-white'
								}`}
								hidden={!renderMenu('referensi/jenis-belanja')}
							>
								Jenis Belanja
							</div>
						</Link>
						<Link href={'/referensi/jenis-kegiatan'}>
							<div
								className={`hover:text-hitam hover:bg-yellow px-3 py-1 ${
									pathname === '/referensi/jenis-kegiatan' ? 'bg-yellow' : 'text-white'
								}`}
								hidden={!renderMenu('referensi/jenis-kegiatan')}
							>
								Jenis Kegiatan
							</div>
						</Link>
						<Link href={'/referensi/akun'}>
							<div
								className={`hover:text-hitam hover:bg-yellow px-3 py-1 ${
									pathname === '/referensi/akun' ? 'bg-yellow' : 'text-white'
								}`}
								hidden={!renderMenu('referensi/akun')}
							>
								Jenis Pembayaran Kegiatan (Akun)
							</div>
						</Link>
						<Link href={'/referensi/unit-kerja'}>
							<div
								className={`hover:text-hitam hover:bg-yellow px-3 py-1 ${
									pathname === '/referensi/unit-kerja' ? 'bg-yellow' : 'text-white'
								}`}
								hidden={!renderMenu('referensi/unit-kerja')}
							>
								Unit Kerja
							</div>
						</Link>
						<Link href={'/referensi/persyaratan'}>
							<div
								className={`hover:text-hitam hover:bg-yellow px-3 py-1 ${
									pathname === '/referensi/persyaratan' ? 'bg-yellow' : 'text-white'
								}`}
								hidden={!renderMenu('referensi/persyaratan')}
							>
								Persyaratan
							</div>
						</Link>
						<Link href={'/referensi/verifikator'}>
							<div
								className={`hover:text-hitam hover:bg-yellow px-3 py-1 ${
									pathname === '/referensi/verifikator' ? 'bg-yellow' : 'text-white'
								}`}
								hidden={!renderMenu('referensi/verifikator')}
							>
								Verifikator
							</div>
						</Link>
					</div>
				</div>
				<Link href={'/pengajuan-tagihan'}>
					<div
						className={`hover:text-hitam hover:bg-yellow cursor-pointer px-3 py-1 rounded ${
							pathname.startsWith('/pengajuan-tagihan') ? 'bg-yellow' : 'text-white'
						}`}
						hidden={!renderMenu('pengajuan-tagihan')}
					>
						<i className='pi pi-dollar mr-1' />
						Pengajuan Tagihan
					</div>
				</Link>
				<div
					className={`hover:text-hitam hover:bg-yellow cursor-pointer px-3 py-1 rounded relative dropdown-toggle ${
						pathname.startsWith('/otorisasi') ? 'bg-yellow' : 'text-white'
					}`}
					hidden={!renderMenu('otorisasi')}
				>
					<i className='pi pi-lock mr-1' />
					Otorisasi
					<div className='absolute rounded bg-biru2 w-max min-w-full 2xl:top-8 top-7 -left-0 py-3 z-10 flex flex-col gap-y-1 shadow dropdown-menu'>
						<Link href={'/otorisasi/verifikasi'}>
							<div
								className={`hover:text-hitam hover:bg-yellow px-3 py-1 ${
									pathname === '/otorisasi/verifikasi' ? 'bg-yellow' : 'text-white'
								}`}
								hidden={!renderMenu('otorisasi/verifikasi')}
							>
								Verifikasi
							</div>
						</Link>
						<Link href={'/otorisasi/rekomendasi'}>
							<div
								className={`hover:text-hitam hover:bg-yellow px-3 py-1 ${
									pathname === '/otorisasi/rekomendasi' ? 'bg-yellow' : 'text-white'
								}`}
								hidden={!renderMenu('otorisasi/rekomendasi')}
							>
								Rekomendasi
							</div>
						</Link>
						<Link href={'/otorisasi/persetujuan'}>
							<div
								className={`hover:text-hitam hover:bg-yellow px-3 py-1 ${
									pathname === '/otorisasi/persetujuan' ? 'bg-yellow' : 'text-white'
								}`}
								hidden={!renderMenu('otorisasi/persetujuan')}
							>
								Persetujuan
							</div>
						</Link>
						<Link href={'/otorisasi/pengesahan'}>
							<div
								className={`hover:text-hitam hover:bg-yellow px-3 py-1 ${
									pathname === '/otorisasi/pengesahan' ? 'bg-yellow' : 'text-white'
								}`}
								hidden={!renderMenu('otorisasi/pengesahan')}
							>
								Pengesahan
							</div>
						</Link>
						<Link href={'/otorisasi/spm'}>
							<div
								className={`hover:text-hitam hover:bg-yellow px-3 py-1 ${
									pathname === '/otorisasi/spm' ? 'bg-yellow' : 'text-white'
								}`}
								hidden={!renderMenu('otorisasi/spm')}
							>
								SPM
							</div>
						</Link>
					</div>
				</div>
				<div
					className={`hover:text-hitam hover:bg-yellow cursor-pointer px-3 py-1 rounded relative dropdown-toggle ${
						pathname.startsWith('/laporan') ? 'bg-yellow' : 'text-white'
					}`}
					hidden={!renderMenu('laporan')}
				>
					<i className='pi pi-chart-line mr-1' />
					Laporan
					<div className='absolute rounded bg-biru2 w-max min-w-full 2xl:top-8 top-7 -left-0 py-3 z-10 flex flex-col gap-y-1 shadow dropdown-menu'>
						<Link href={'/laporan/per-user'}>
							<div
								className={`hover:text-hitam hover:bg-yellow px-3 py-1 ${
									pathname === '/laporan/per-user' ? 'bg-yellow' : 'text-white'
								}`}
								hidden={!renderMenu('laporan/per-user')}
							>
								Per User (Verifikator, kasub verif)
							</div>
						</Link>
						<Link href={'/laporan/approval'}>
							<div
								className={`hover:text-hitam hover:bg-yellow px-3 py-1 ${
									pathname === '/laporan/approval' ? 'bg-yellow' : 'text-white'
								}`}
								hidden={!renderMenu('laporan/approval')}
							>
								Approval (Kabag verif, bendahara, ppspm)
							</div>
						</Link>
						<Link href={'/laporan/rekap-bulanan-per-user'}>
							<div
								className={`hover:text-hitam hover:bg-yellow px-3 py-1 ${
									pathname === '/laporan/rekap-bulanan-per-user' ? 'bg-yellow' : 'text-white'
								}`}
								hidden={!renderMenu('laporan/rekap-bulanan-per-user')}
							>
								Rekapitulasi bulanan per user
							</div>
						</Link>
						<Link href={'/laporan/rekap-verif-per-bulan'}>
							<div
								className={`hover:text-hitam hover:bg-yellow px-3 py-1 ${
									pathname === '/laporan/rekap-verif-per-bulan' ? 'bg-yellow' : 'text-white'
								}`}
								hidden={!renderMenu('laporan/rekap-verif-per-bulan')}
							>
								Rekapitulasi hasil verifikasi per bulan
							</div>
						</Link>
						<Link href={'/laporan/rekap-per-unit-kerja'}>
							<div
								className={`hover:text-hitam hover:bg-yellow px-3 py-1 ${
									pathname === '/laporan/rekap-per-unit-kerja' ? 'bg-yellow' : 'text-white'
								}`}
								hidden={!renderMenu('laporan/rekap-per-unit-kerja')}
							>
								Rekapitulasi per unit kerja
							</div>
						</Link>
						<Link href={'/laporan/rekap-per-jenis-belanja'}>
							<div
								className={`hover:text-hitam hover:bg-yellow px-3 py-1 ${
									pathname === '/laporan/rekap-per-jenis-belanja' ? 'bg-yellow' : 'text-white'
								}`}
								hidden={!renderMenu('laporan/rekap-per-jenis-belanja')}
							>
								Rekapitulasi per jenis belanja (BAS)
							</div>
						</Link>
						<Link href={'/laporan/verif-per-bulan'}>
							<div
								className={`hover:text-hitam hover:bg-yellow px-3 py-1 ${
									pathname === '/laporan/verif-per-bulan' ? 'bg-yellow' : 'text-white'
								}`}
								hidden={!renderMenu('laporan/verif-per-bulan')}
							>
								Hasil verifikasi per bulan (detail)
							</div>
						</Link>
					</div>
				</div>
				<Link href={'/peraturan'}>
					<div
						className={`hover:text-hitam hover:bg-yellow cursor-pointer px-3 py-1 rounded ${
							pathname.startsWith('/peraturan') ? 'bg-yellow' : 'text-white'
						}`}
						hidden={!renderMenu('peraturan')}
					>
						<i className='pi pi-shield mr-1' />
						Peraturan
					</div>
				</Link>
				<div
					className={`hover:text-hitam hover:bg-yellow cursor-pointer px-3 py-1 rounded relative dropdown-toggle ${
						pathname.startsWith('/manajemen') ? 'bg-yellow' : 'text-white'
					}`}
					hidden={!renderMenu('manajemen')}
				>
					<i className='pi pi-database mr-1' />
					Manajemen
					<div className='absolute rounded bg-biru2 w-max min-w-full 2xl:top-8 top-7 -left-0 py-3 z-10 flex flex-col gap-y-1 shadow dropdown-menu'>
						<Link href={'/manajemen/user'}>
							<div
								className={`hover:text-hitam hover:bg-yellow px-3 py-1 ${
									pathname === '/manajemen/user' ? 'bg-yellow' : 'text-white'
								}`}
								hidden={!renderMenu('manajemen/user')}
							>
								User
							</div>
						</Link>
						<Link href={'/manajemen/role'}>
							<div
								className={`hover:text-hitam hover:bg-yellow px-3 py-1 ${
									pathname === '/manajemen/role' ? 'bg-yellow' : 'text-white'
								}`}
								hidden={!renderMenu('manajemen/role')}
							>
								Role
							</div>
						</Link>
						<Link href={'/manajemen/jam-kerja'}>
							<div
								className={`hover:text-hitam hover:bg-yellow px-3 py-1 ${
									pathname === '/manajemen/jam-kerja' ? 'bg-yellow' : 'text-white'
								}`}
								hidden={!renderMenu('manajemen/jam-kerja')}
							>
								Jam Kerja
							</div>
						</Link>
					</div>
				</div>
			</div>
		</div>
	)
}