"use client"

import {
    CalendarClock,
    CandlestickChart,
    LayoutDashboard, LibraryBig,
    LucideIcon,
    MessageCircleMore,
    UserRound
} from "lucide-react";
import Link from "next/link";
import {usePathname} from "next/navigation";
import {
    APPLICATION_DASHBOARD_URL,
    CALENDAR_APPOINTMENTS_URL,
    CLIENT_PATIENTS_URL, LIBRARY_RESOURCE_URL,
    SELF_PROGRESS_EVALUATION_URL,
    SESSIONS_URL
} from "@/lib/constants";
import {Tooltip, TooltipProvider, TooltipTrigger, TooltipContent} from "@/components/ui/tooltip";
import {cn} from "@/lib/utils";

export type NavLinkPropsType = {
    icon: LucideIcon;
    title: string;
    link: string;
}

export default function NavLink(props: NavLinkPropsType) {
    const isActive = usePathname().includes(props.link);
    return (
        <TooltipProvider>
            <Tooltip>
                <TooltipTrigger asChild>
                    <Link href={props.link}>
                        <div
                            className={`relative flex justify-center items-center p-2 md:py-5 group ${isActive ? "bg-green-50 hover:bg-green-100" : "bg-white hover:bg-green-100"}`}>

                            <svg className={cn(
                                "absolute top-0 w-[0.4rem] h-full left-0 text-green-600 hidden",{
                                    "block": isActive
                                }
                            )} xmlns="http://www.w3.org/2000/svg" viewBox="0 0 6.62 50">
                                <path fill="currentColor" d="M0,0h0C3.65,0,6.62,2.97,6.62,6.62v36.76C6.62,47.03,3.65,50,0,50h0V0h0Z"/>
                            </svg>

                            {
                                <props.icon
                                    size={24}
                                    className={`w-7 h-6 group-focus:text-green-400 group-active:text-green-400 group-active:scale-110 group-hover:scale-110 dark:text-gray-500 transition ease-out duration-200 ${isActive ? 'text-green-600' : 'text-green-900'}`}/>
                            }
                        </div>
                    </Link>
                </TooltipTrigger>
                <TooltipContent side={"right"}>
                    <p>{props.title}</p>
                </TooltipContent>
            </Tooltip>
        </TooltipProvider>
    )
}


export const clientNavLinks: NavLinkPropsType[] = [
    {
        title: "Dashboard",
        icon: LayoutDashboard,
        link: APPLICATION_DASHBOARD_URL
    },
    {
        title: "Sessions",
        icon: MessageCircleMore,
        link: SESSIONS_URL
    },
    {
        title: "Patients",
        icon: UserRound,
        link: CLIENT_PATIENTS_URL
    },
    {
        title: "Calendar",
        icon: CalendarClock,
        link: CALENDAR_APPOINTMENTS_URL
    },
    {
        title: "Library Resources",
        icon: LibraryBig,
        link: LIBRARY_RESOURCE_URL
    }
]

export const patientNavLinks: NavLinkPropsType[] = [
    {
        title: "Dashboard",
        icon: LayoutDashboard,
        link: APPLICATION_DASHBOARD_URL
    },
    {
        title: "Sessions",
        icon: MessageCircleMore,
        link: SESSIONS_URL
    },
    {
        title: "Self Progress Evaluation",
        icon: CandlestickChart,
        link: SELF_PROGRESS_EVALUATION_URL
    },
    {
        title: "Calendar",
        icon: CalendarClock,
        link: CALENDAR_APPOINTMENTS_URL
    },
    {
        title: "Library Resources",
        icon: LibraryBig,
        link: LIBRARY_RESOURCE_URL
    },
]