import {NavLink} from "react-router-dom";
import {useMemo} from "react";
import {useTranslation} from "react-i18next";

import useAuth from "@/hooks/useAuth.ts";
import {IconPermission, IconQRCode, IconQuery, IconReconciliation} from "@/components/logo";

export const AllDashboardMenu = [
    {
        key: 'manual',
        icon: <IconQRCode/>,
        path: '/dashboard/manual',
        permission: 'manual_payment',
    },
    {
        key: 'bill',
        icon: <IconQuery/>,
        path: '/dashboard/bill',
        permission: 'bill_page',
    },
    {
        key: 'check',
        icon: <IconReconciliation/>,
        path: '/dashboard/reconciliation',
        permission: 'apply_page',
    },
    {
        key: 'permission',
        icon: <IconPermission/>,
        path: '/dashboard/permission',
        permission: 'permission_edit',
    }
]

export function DashboardNavigation() {
    const {t} = useTranslation()

    const {user} = useAuth();
    const navItems = useMemo(() => {
        if (!user || !user.permissions) return [];

        return AllDashboardMenu.filter(it => {
            if(user.permissions && user.permissions[it.permission]) return true;
            return false
        });
    }, [user])
    return (<div className={'dashboard-menu-container'}>
            {navItems.map((it) => (
                <NavLink to={it.path} key={it.key} className={'nav-item'}>
                    {it.icon}
                    <span className="menu-text">{t(`layout.menu.${it.key}`)}</span>
                </NavLink>
            ))}
        </div>
    );
}