"use client";
import React, { useEffect, useRef, useState } from "react";
import { profileOptions } from "@/lib/constrants";
import { usePathname } from "next/navigation";
import Link from "next/link";
import { signOut, useSession } from "next-auth/react";
import Image from "next/image";

async function getUserByUuid(params: string) {
  const res = await fetch(`http://localhost:3000/api/user/${params}`, {
    method: "GET",
  });
  return res.json();
}
type Profile = {
  full_name: string;
  mobile_number: string;
  picture: {
    file_url: string;
  };
};

type User = {
  email: string;
  profile: Profile;
};

export default function AccountDropdown2() {
  const { data: session } = useSession();
  const pathname = usePathname();
  const [user, setUser] = useState<User>();
  useEffect(() => {
    async function data() {
      if (session) {
        //?-------------- User data Fatching--------------//
        const { User, UserAddresses } = await getUserByUuid(session?.user.uuid);
        setUser(User);
      }
    }
    data();
  }, [session]);
  const [dropdownOpen, setDropdownOpen] = useState(false);

  const trigger = useRef<HTMLButtonElement>(null);
  const dropdown = useRef<HTMLDivElement>(null);

  // close on click outside
  useEffect(() => {
    const clickHandler = (event: MouseEvent) => {
      const target = event.target as Node;
      if (!dropdown.current) return;
      if (
        !dropdownOpen ||
        dropdown.current.contains(target) ||
        (trigger.current && trigger.current.contains(target))
      )
        return;
      setDropdownOpen(false);
    };
    document.addEventListener("click", clickHandler);
    return () => document.removeEventListener("click", clickHandler);
  });

  // close if the esc key is pressed
  useEffect(() => {
    const keyHandler = (event: KeyboardEvent) => {
      if (!dropdownOpen || event.keyCode !== 27) return;
      setDropdownOpen(false);
    };
    document.addEventListener("keydown", keyHandler);
    return () => document.removeEventListener("keydown", keyHandler);
  });

  return (
    <section className="bg-gray-2 py-20 ">
      <div className="container">
        <div className="flex justify-center">
          <div className="relative inline-block">
            <button
              ref={trigger}
              onClick={() => setDropdownOpen(!dropdownOpen)}
              className="mb-3.5 inline-flex h-12 items-center justify-center gap-2 rounded-lg border border-stroke bg-white px-6 py-3 text-base font-medium text-dark "
            >
              Account
            </button>
            <div
              ref={dropdown}
              onFocus={() => setDropdownOpen(true)}
              onBlur={() => setDropdownOpen(false)}
              className={`absolute right-0 top-full w-[240px] divide-y divide-stroke overflow-hidden rounded-lg bg-white ${
                dropdownOpen ? "block" : "hidden"
              }`}
            >
              {/* account info */}
              <div className="flex items-center gap-3 px-4 py-3">
                <div className="relative aspect-square w-10 rounded-full">
                  <Image
                    src="https://cdn.tailgrids.com/2.2/assets/core-components/images/account-dropdowns/image-1.jpg"
                    alt="account"
                    width={40}
                    height={40}
                    className="w-full rounded-full object-cover object-center"
                  />
                  <span className="absolute -right-0.5 -top-0.5 block h-3.5 w-3.5 rounded-full border-2 border-white bg-green "></span>
                </div>
                <div>
                  <p className="text-sm font-semibold text-dark ">
                    Andrio Miller
                  </p>
                  <p className="text-sm text-body-color ">
                    fardous@company.com
                  </p>
                </div>
              </div>
              <nav>
                <ul className="space-y-4">
                  {session && (
                    <>
                      {profileOptions.map((link, i) => (
                        <li
                          key={link.key}
                          className={`pl-4 pr-3 py-2 rounded-lg ${
                            pathname.includes(link.key) ? "bg-blue-300/30" : ""
                          }`}
                        >
                          <Link
                            href={link.url}
                            className={`flex items-center text-black hover:text-secondary ${
                              pathname.includes(link.key)
                                ? "text-secondary"
                                : ""
                            }`}
                          >
                            {link.icon}{" "}
                            <span className="text-sm font-medium ml-4 text-gray-800">
                              {link.title}
                            </span>
                          </Link>
                        </li>
                      ))}
                    </>
                  )}
                </ul>
              </nav>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}