"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";

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("state");
  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(() => {
    console.log("us", username);
  }, [username]);

  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={"https://netidhub.com/assets/img/user-avatar.png"}
                alt={"Image"}
                width={36}
                height={36}
                className="rounded-full"
              />
              <div>
                <div className="text-sm font-medium capitalize lg:block hidden">
                  {detail?.fullname}
                </div>
                <p className="text-xs">({detail?.fullname})</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",
              },
              // {
              //   name: "Billing",
              //   icon: "heroicons:megaphone",
              //   href: "/dashboard",
              // },
              // {
              //   name: "Settings",
              //   icon: "heroicons:paper-airplane",
              //   href: "/dashboard",
              // },
              // {
              //   name: "Keyboard shortcuts",
              //   icon: "heroicons:language",
              //   href: "/dashboard",
              // },
            ].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>
            {/* <Link href="/dashboard" 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="heroicons:user-group" className="w-4 h-4" />
                team
              </DropdownMenuItem>
            </Link>
            <DropdownMenuSub>
              <DropdownMenuSubTrigger className="flex items-center gap-2 text-sm font-medium text-default-600 capitalize px-3 py-1.5 ">
                <Icon icon="heroicons:user-plus" className="w-4 h-4" />
                Invite user
              </DropdownMenuSubTrigger>
              <DropdownMenuPortal>
                <DropdownMenuSubContent>
                  {[
                    {
                      name: "email",
                    },
                    {
                      name: "message",
                    },
                    {
                      name: "facebook",
                    },
                  ].map((item, index) => (
                    <Link
                      href="/dashboard"
                      key={`message-sub-${index}`}
                      className="cursor-pointer"
                    >
                      <DropdownMenuItem className="text-sm font-medium text-default-600 capitalize px-3 py-1.5 cursor-pointer">
                        {item.name}
                      </DropdownMenuItem>
                    </Link>
                  ))}
                </DropdownMenuSubContent>
              </DropdownMenuPortal>
            </DropdownMenuSub>
            <Link href="/dashboard">
              <DropdownMenuItem className="flex items-center gap-2 text-sm font-medium text-default-600 capitalize px-3 py-1.5 cursor-pointer">
                <Icon icon="heroicons:variable" className="w-4 h-4" />
                Github
              </DropdownMenuItem>
            </Link>

            <DropdownMenuSub>
              <DropdownMenuSubTrigger className="flex items-center gap-2 text-sm font-medium text-default-600 capitalize px-3 py-1.5 cursor-pointer">
                <Icon icon="heroicons:phone" className="w-4 h-4" />
                Support
              </DropdownMenuSubTrigger>
              <DropdownMenuPortal>
                <DropdownMenuSubContent>
                  {[
                    {
                      name: "portal",
                    },
                    {
                      name: "slack",
                    },
                    {
                      name: "whatsapp",
                    },
                  ].map((item, index) => (
                    <Link href="/dashboard" key={`message-sub-${index}`}>
                      <DropdownMenuItem className="text-sm font-medium text-default-600 capitalize px-3 py-1.5 cursor-pointer">
                        {item.name}
                      </DropdownMenuItem>
                    </Link>
                  ))}
                </DropdownMenuSubContent>
              </DropdownMenuPortal>
            </DropdownMenuSub> */}
          </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;