amati/apps/frontend/src/components/AppHeader.tsx

import { useState } from "react";
import logo from "@/assets/logos/amati-logo.png";
import cx from "clsx";
import classNames from "./styles/appHeader.module.css";
import { IoMdMenu } from "react-icons/io";
import { Link, useLocation } from "@tanstack/react-router";
import useAuth from "@/hooks/useAuth";
import { Avatar, AvatarFallback, AvatarImage } from "@/shadcn/components/ui/avatar";
import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from "@/shadcn/components/ui/dropdown-menu";
import { Button } from "@/shadcn/components/ui/button";
import { TbMenu2 } from "react-icons/tb";
// import getUserMenus from "../actions/getUserMenus";
// import { useAuth } from "@/modules/auth/contexts/AuthContext";
// import UserMenuItem from "./UserMenuItem";
// import { toggleLeftSidebar } from "../../src/routes/_assessmentLayout/assessment/index.lazy";

interface Props {
	openNavbar: boolean;
	toggle: () => void;
}

interface User {
	id: string;
	name: string;
	permissions: string[];
	role: string;
	photoProfile?: string;
}

interface Props {
	toggle: () => void;
}

// const mockUserData = {
// 	name: "Fulan bin Fulanah",
// 	email: "janspoon@fighter.dev",
// 	image: "https://raw.githubusercontent.com/mantinedev/mantine/master/.demo/avatars/avatar-5.png",
// };

interface Props {
	toggle: () => void;
	toggleLeftSidebar: () => void; // Add this prop
  }

export default function AppHeader({ toggle, toggleLeftSidebar }: Props) {
	const [userMenuOpened, setUserMenuOpened] = useState(false);
	const [isLeftSidebarOpen, setIsLeftSidebarOpen] = useState(false);

	const { user }: { user: User | null } = useAuth();
	const isSuperAdmin = user?.role === "super-admin";

	// const userMenus = getUserMenus().map((item, i) => (
	// 	<UserMenuItem item={item} key={i} />
	// ));

	// const toggleLeftSidebar = () => setIsLeftSidebarOpen(!isLeftSidebarOpen);

	const { pathname } = useLocation();
	const showAssessmentResultLinks = pathname === "/assessmentResult";
	const showAssessmentLinks = pathname === "/assessment";
	const assessmentRequestsLinks = pathname === "/assessmentRequest";
	const managementResultsLinks = pathname === "/assessmentResultsManagement";

	const shouldShowButton = !(showAssessmentResultLinks || showAssessmentLinks || assessmentRequestsLinks);

	return (
		<header className="fixed top-0 left-0 w-full h-16 bg-white z-50 border">
			<div className="flex h-full justify-between w-full items-center">
				<div className="flex items-center">
					{shouldShowButton && (
						<Button
							onClick={toggle}
							className="flex items-center px-5 py-5 lg:hidden bg-white text-black hover:bg-white hover:text-black focus:bg-white focus:text-black active:bg-white active:text-black"
						>
							<IoMdMenu />
						</Button>
					)}

					{showAssessmentLinks && (
						<TbMenu2 onClick={toggleLeftSidebar} className="md:ml-0 ml-6 mt-8 w-6 h-fit pb-4 mb-4 cursor-pointer" />
					)}
					
					<img
						src={logo}
						alt="Logo"
						className="w-44 h-fit px-8 py-5 object-cover hidden lg:block"
					/>
				</div>

				{/* Conditional Navlinks */}
				{!isSuperAdmin && (
					<div className="flex space-x-4 justify-center w-full ml-14">
						{showAssessmentResultLinks && (
							<>
								<Link
									to="/assessmentRequest"
									className={cx("text-sm font-medium", {
										"text-blue-600":
											assessmentRequestsLinks, // warna aktif
										"text-gray-700":
											!assessmentRequestsLinks, // warna default
									})}
									onClick={() => {
										if (window.opener) {
											window.close();
										}
									}}
								>
									Permohonan Assessment
								</Link>
								<Link
									to="/assessmentResult"
									className={cx("text-sm font-medium", {
										"text-blue-600":
											showAssessmentResultLinks, // warna aktif
										"text-gray-700":
											!showAssessmentResultLinks, // warna default
									})}
								>
									Hasil Assessment
								</Link>
							</>
						)}

						{showAssessmentLinks && (
							<>
								<Link
									to="/assessmentRequest"
									className={cx("text-sm font-medium", {
										"text-blue-600":
											assessmentRequestsLinks, // warna aktif
										"text-gray-700":
											!assessmentRequestsLinks, // warna default
									})}
									onClick={() => {
										if (window.opener) {
											window.close();
										}
									}}
								>
									Permohonan Assessment
								</Link>
								<Link
									to="/assessment"
									className={cx("text-sm font-medium", {
										"text-blue-600": showAssessmentLinks, // warna aktif
										"text-gray-700": !showAssessmentLinks, // warna default
									})}
								>
									Assessment
								</Link>
							</>
						)}
					</div>
				)}

				<DropdownMenu
					modal={false}
					open={userMenuOpened}
					onOpenChange={setUserMenuOpened}
				>
					<DropdownMenuTrigger asChild className="flex">
						<button
							className={cx(classNames.user, {
								[classNames.userActive]: userMenuOpened,
							})}
						>
							<div className="flex items-center">
								<Avatar>
									{user?.photoProfile ? (
										<AvatarImage src={user.photoProfile} />
									) : (
										<AvatarFallback>
											{user?.name?.charAt(0) ?? "A"}
										</AvatarFallback>
									)}
								</Avatar>
							</div>
						</button>
					</DropdownMenuTrigger>

					<DropdownMenuContent
						align="end"
						className="transition-all duration-200 z-50 border bg-white w-64"
					>
						<DropdownMenuItem asChild>
							<Link to="/logout">Logout</Link>
						</DropdownMenuItem>
					</DropdownMenuContent>
				</DropdownMenu>
			</div>
		</header>
	);
}