import React from "react";
import { Input } from "../ui/input";
import { auth } from "@/server/auth";
import { Button } from "../ui/button";
import Link from "next/link";
import Avatar from "../avatar";
import { hasPermission, Role } from "@/lib/validation/permissions";
import {
  Popover,
  PopoverContent,
  PopoverTrigger,
} from "@/components/ui/popover";
import CreateArticleDialog from "@/components/article/create-article-dialog";
import CreateCategoryDialog from "@/app/(PAGES)/_components/category/create-category-dialog";
import { appRoutes } from "@/config";

async function Navbar() {
  const session = await auth();
  const isEditor = session?.user
    ? hasPermission(session.user.role, Role.EDITOR)
    : false;
  const isAdmin = session?.user
    ? hasPermission(session.user.role, Role.ADMIN)
    : false;
  return (
    <div className="flex h-14 items-center justify-between border-b bg-sidebar px-4">
      <Input className="w-full max-w-xs" placeholder="Suche..." />

      <div className="flex items-center gap-4">
        {isEditor && (
          <Popover>
            <PopoverTrigger asChild>
              <Button>Erstellen</Button>
            </PopoverTrigger>

            <PopoverContent
              className="w-full max-w-48 space-y-2 bg-sidebar"
              align="end"
              // side="left"
            >
              <CreateArticleDialog />
              <CreateCategoryDialog />
            </PopoverContent>
          </Popover>
        )}
        {isAdmin && (
          <Button asChild>
            <Link href={appRoutes.admin.base}>Admin Dashboard</Link>
          </Button>
        )}
        {session ? (
          <Avatar
            className="size-8"
            src={session.user.image}
            fb={session.user.name}
          />
        ) : (
          <Button asChild>
            <Link href={"/api/auth/signin"}>Anmelden</Link>
          </Button>
        )}
      </div>
    </div>
  );
}

export default Navbar;