// * Packages
import { Link, usePage } from "@inertiajs/react";
import { CircleUserRoundIcon, LogOutIcon, UserIcon } from "lucide-react";
import { route } from "ziggy-js";
// * Components shadcn
import {
    DropdownMenu,
    DropdownMenuContent,
    DropdownMenuItem,
    DropdownMenuSeparator,
    DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu";
// * Other
import AppBreadcrumbs from "@/back/Components/Layout/AppBreadcrumbs";
import CustomSidebarTrigger from "@/back/Components/CustomSidebarTrigger";
import { Button } from "@/components/ui/button";
import { AuthProp } from "@/back/types/global";
import useTrans from "@/hooks/use-translations";
import AppSettings from "@/back/Components/Layout/AppSettings";

export default function AppHeader() {
    const auth = usePage().props.auth as AuthProp;
    const { user } = auth;
    return (
        <header className="sticky top-0 flex flex-col justify-between items-center bg-background border-b z-20">
            <div className="sticky top-0 flex flex-row justify-between items-center w-full py-4">
                <div className="flex flex-row justify-start items-center">
                    <CustomSidebarTrigger />
                    <AppBreadcrumbs className="hidden md:block" />
                </div>
                <div className="flex items-center">
                    <AppSettings />
                    <DropdownMenu>
                        <DropdownMenuTrigger asChild>
                            <Button
                                variant="ghost"
                                className="text-muted-foreground"
                            >
                                <CircleUserRoundIcon />
                                <span className="hidden lg:block">
                                    {user.first_name} {user.last_name}
                                </span>
                            </Button>
                        </DropdownMenuTrigger>
                        <DropdownMenuContent
                            side="bottom"
                            className="w-fit me-1"
                        >
                            <DropdownMenuItem className="p-0">
                                <Button variant="ghost" asChild>
                                    <Link
                                        href={route("back.users.show", user.id)}
                                        className="w-full"
                                    >
                                        <UserIcon />
                                        {useTrans("back.profile")}
                                    </Link>
                                </Button>
                            </DropdownMenuItem>
                            <DropdownMenuSeparator />
                            <DropdownMenuItem className="p-0">
                                <Button variant="ghost" asChild>
                                    <a
                                        href={route("back.logout")}
                                        className="w-full"
                                    >
                                        <LogOutIcon />
                                        {useTrans("back.disconnect")}
                                    </a>
                                </Button>
                            </DropdownMenuItem>
                        </DropdownMenuContent>
                    </DropdownMenu>
                </div>
            </div>
            <AppBreadcrumbs className="block md:hidden mb-4 w-full" />
        </header>
    );
}