"use client";
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuGroup,
  DropdownMenuItem,
  DropdownMenuLabel,
  DropdownMenuPortal,
  DropdownMenuSeparator,
  DropdownMenuSub,
  DropdownMenuSubContent,
  DropdownMenuSubTrigger,
  DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu";
import { Icon } from "@/components/ui/icon";
import Image from "next/image";
import { Link } from "@/i18n/routing";
import { Button } from "@/components/ui/button";
import Cookies from "js-cookie";
import { useEffect, useState } from "react";
import { useRouter } from "@/components/navigation";
import { getInfoProfile } from "@/service/auth";
import { getCookiesDecrypt } from "@/lib/utils";

type Detail = {
  id: number;
  userId: any;
  firstName: string;
  username: string;
  fullname: string;
  memberIdentity: any;
  email: string;
  address: string;
  phoneNumber: any;
  message: string;
};

const ProfileInfo = () => {
  const username = Cookies.get("username");
  const fullname = Cookies.get("ufne");
  const picture = Cookies.get("profile_picture");
  const router = useRouter();
  // const [detail, setDetail] = useState<Detail>();

  const onLogout = () => {
    Object.keys(Cookies.get()).forEach((cookieName) => {
      Cookies.remove(cookieName);
    });

    router.push("/");
  };

  useEffect(() => {
    if (!fullname) {
      router.push("/auth");
    }
  }, [fullname]);

  // useEffect(() => {
  //   async function initState() {
  //     const response = await getInfoProfile();
  //     const details = response?.data?.data;

  //     setDetail(details);
  //     console.log("data", details);
  //   }

  //   initState();
  // }, []);

  return (
    <div className="md:block hidden">
      <DropdownMenu>
        <DropdownMenuTrigger asChild className=" cursor-pointer">
          {/* {detail !== undefined ? ( */}
            <div className="flex items-center gap-3 text-default-800">
              <Image
                src={"/avatar-profile.png"}
                alt={"Image"}
                width={36}
                height={36}
                className="rounded-full"
              />
              <div>
                <div className="text-sm font-medium capitalize lg:block hidden">
                  {fullname}
                </div>
                <p className="text-xs">({username})</p>
              </div>
              <span className="text-base me-2.5 lg:inline-block hidden">
                <Icon icon="heroicons-outline:chevron-down"></Icon>
              </span>
            </div>
          {/* ) : (
            ""
          )} */}
        </DropdownMenuTrigger>
        <DropdownMenuContent className="w-56 p-0" align="end">
          {/* <DropdownMenuLabel className="flex gap-2 items-center mb-1 p-3">
            <Image
              src={"/images/avatar/icon-avatar-1.png"}
              alt={username as string}
              width={36}
              height={36}
              className="rounded-full"
            />

            <div>
              <div className="text-sm font-medium text-default-800 capitalize ">
                {username}
              </div>
              <Link
                href="/dashboard"
                className="text-xs text-default-600 hover:text-primary"
              >
                {username}
              </Link>
            </div>
          </DropdownMenuLabel> */}
          <DropdownMenuGroup>
            {[
              {
                name: "profile & Settings",
                icon: "heroicons:user",
                href: "/profile",
              },
            ].map((item, index) => (
              <Link
                href={item.href}
                key={`info-menu-${index}`}
                className="cursor-pointer"
              >
                <DropdownMenuItem className="flex items-center gap-2 text-sm font-medium text-default-600 capitalize px-3 py-1.5 cursor-pointer">
                  <Icon icon={item.icon} className="w-4 h-4" />
                  {item.name}
                </DropdownMenuItem>
              </Link>
            ))}
          </DropdownMenuGroup>
          <DropdownMenuSeparator />
          <DropdownMenuGroup></DropdownMenuGroup>
          <DropdownMenuItem className="flex items-center gap-2 text-sm font-medium text-default-600 capitalize my-1 px-3 cursor-pointer">
            <div>
              <Link href={"/auth"}>
                <button
                  type="submit"
                  className=" w-full  flex  items-center gap-2"
                  onClick={onLogout}
                >
                  <Icon icon="heroicons:power" className="w-4 h-4" />
                  Log out
                </button>
              </Link>
            </div>
          </DropdownMenuItem>
        </DropdownMenuContent>
      </DropdownMenu>
    </div>
  );
};
export default ProfileInfo;