"use client";

import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuGroup,
  DropdownMenuItem,
  DropdownMenuSeparator,
  DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu";
import { Tooltip, TooltipContent, TooltipTrigger } from "@/components/ui/tooltip";
import { UserData } from "@/components/user-menu";
import { useLocalStorage } from "@/lib/hooks/use-local-storage";
import service, { UserDataStorageName } from "@/lib/http/service";
// import { SignOutButton, useUser } from "@clerk/nextjs";
import { Book, ChevronRight, LogOut, Rocket, Settings } from "lucide-react";
import Link from "next/link";
import { redirect, useRouter } from "next/navigation";
import React from "react";
import toast from "react-hot-toast";
export const UserButton: React.FC = () => {
  // const { user } = useUser();
  const router = useRouter();

  // if (!user) {
  //   return null;
  // }

  const user = {
    username: "小明"
  }

  const [userData, setUserData] = useLocalStorage(
    UserDataStorageName,
    {
      auth_token: "",
      id: 1,
      login_ip: "",
      login_time: 0,
      role: "",
      user_name: "",
      first_name: "",
      version: ""
    } as UserData
  )

  console.log("----userData----", userData)

  // if (!userData.auth_token) {
  //   return redirect("/");
  // }




  return (
    <DropdownMenu>
      <DropdownMenuTrigger className="absolute inset-x-0 z-20 bottom-0 flex items-center justify-between gap-2 px-6 py-3 hover:bg-gray-200 dark:hover:bg-gray-800 hover:cursor-pointer">
        <div className="flex items-center gap-2 whitespace-nowrap overflow-hidden">
          {/*<Avatar className="w-8 h-8">
             {user.imageUrl ? <AvatarImage src={user.imageUrl} alt="Profile picture" /> : null}
            <AvatarFallback className=" w-8 h-8 overflow-hidden text-gray-700 bg-gray-100 border border-gray-500 rounded-md">
              {(user?.fullName ?? "U").slice(0, 2).toUpperCase()}
            </AvatarFallback> 

            xxxx
          </Avatar>*/}

          {/* <Tooltip>
            <TooltipTrigger className="w-full overflow-hidden text-ellipsis">
              <span className="overflow-hidden text-ellipsis text-sm font-semibold">
                {user.username}
              </span>
            </TooltipTrigger>
            <TooltipContent>
              <span className="text-sm font-semibold">

                {user.username}
              </span>
            </TooltipContent>
          </Tooltip> */}

          {userData.first_name || userData.user_name}
        </div>
        <ChevronRight className="w-4 h-4" />
      </DropdownMenuTrigger>

      <DropdownMenuContent side="right" className="w-96">
        <DropdownMenuGroup>
          <Link href="/manage/overview/">
            <DropdownMenuItem className="cursor-pointer">
              <Rocket className="w-4 h-4 mr-2" />
              <span>新员工</span>
            </DropdownMenuItem>
          </Link>
          {/* <Link href="https://unkey.dev/docs" target="_blank">
            <DropdownMenuItem className="cursor-pointer">
              <Book className="w-4 h-4 mr-2" />
              <span>Docs</span>
            </DropdownMenuItem>
          </Link> */}
          {/* <Link href="/app/settings/user">
            <DropdownMenuItem className="cursor-pointer">
              <Settings className="w-4 h-4 mr-2" />
              <span>Settings</span>
            </DropdownMenuItem>
          </Link> */}


        </DropdownMenuGroup>
        <DropdownMenuSeparator />
        <DropdownMenuGroup>
          {/* <SignOutButton signOutCallback={() => router.push("/auth/sign-in")}>
            <DropdownMenuItem asChild className="cursor-pointer">
              <span>
                <LogOut className="w-4 h-4 mr-2" />
                Sign out
              </span>
            </DropdownMenuItem>
          </SignOutButton> */}

          <DropdownMenuItem
            className="flex items-start justify-start"
            onClick={async () => {
              await service.post('/api/v1/customer/logout', {
              }, {
                headers: {
                  // 'Authorization': token
                }
              }).then(function (result: any) {


                console.log("result:", result)

                if (result && result.header.code != 0) {

                  toast.error(result.header.message)
                  return
                }


                localStorage.removeItem(UserDataStorageName);
                // location.reload();
                window.location.href = `/`



              }).catch((err: any) => {
                // setInitLoading(false);

              });
            }}
          >
            <Settings className="w-4 h-4 mr-2" />
            <span>退出</span>
          </DropdownMenuItem>
        </DropdownMenuGroup>
      </DropdownMenuContent>
    </DropdownMenu>
  );
};