"use client";
import React from "react";
import { Button } from "@/components/ui/button";
import {
  Ban,
  Eye,
  Handshake,
  HeartHandshake,
  MoreHorizontal,
  UserCog,
  UserX,
} from "lucide-react";

import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuLabel,
  DropdownMenuSeparator,
  DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu";
import type { Player } from "@/server/db/schema";
import Link from "next/link";
import { appRoutes } from "@/config/app.routes";
import { cn } from "@/lib/utils";
import KickPlayerDialog from "./player-kick-dialog";
import { api } from "@/trpc/react";
function LobbyPlayerOptions({
  player,
  lobbyId,
}: {
  player: Player;
  lobbyId: string;
}) {
  const [open, setOpen] = React.useState(false);
  const dropdownItemClassName = " flex items-center gap-1 ";
  const changeRole = api.lobby.changeRole.useMutation();
  return (
    <DropdownMenu>
      <DropdownMenuTrigger asChild>
        <Button
          size={"icon"}
          variant={"ghost"}
          className="hover:bg-border/10 hover:text-white"
        >
          <MoreHorizontal />
        </Button>
      </DropdownMenuTrigger>
      <DropdownMenuContent>
        <DropdownMenuLabel className="w-32 truncate overflow-hidden font-bold">
          {player.displayName}
        </DropdownMenuLabel>
        <DropdownMenuSeparator />
        <DropdownMenuItem className={dropdownItemClassName} asChild>
          <Link href={appRoutes.playerProfile(player.id)} target="_blank">
            <Eye className="size-4 text-white" />
            View Profile
          </Link>
        </DropdownMenuItem>
        <DropdownMenuItem className={dropdownItemClassName} asChild>
          <Link href={appRoutes.friend(player.id)} target="_blank">
            <HeartHandshake className="size-4 text-white" />
            My Friend
          </Link>
        </DropdownMenuItem>

        <DropdownMenuSeparator />
        <DropdownMenuItem className={dropdownItemClassName}>
          <UserCog className="size-4 text-white" />
          Change Role
        </DropdownMenuItem>
        <DropdownMenuItem
          onClick={(e) => e.preventDefault()}
          className={cn(
            dropdownItemClassName,
            "group focus:border-destructive focus:text-destructive border border-transparent focus:font-bold",
          )}
        >
          <KickPlayerDialog lobbyId={lobbyId} player={player} />
        </DropdownMenuItem>
      </DropdownMenuContent>
    </DropdownMenu>
  );
}

export default LobbyPlayerOptions;