import React, { useEffect, useState } from "react";
import Image from "next/image";
import Link from "next/link";
import { useSession } from "next-auth/react";
import { UserSchema } from "../../../types/user";

const ProfileButtonXl = () => {
  let imgUrl = "/public/spongeBobProPic.jpg";
  const { data: user, status } = useSession();
  const [localUserData, setLocalUserData] = useState<null | { userId: string }>(
    null
  );
  useEffect(() => {
    if (user && user.user && user.user.image) {
      imgUrl = user.user.image;
    }
  }, [user]);

  const getFilteredEmail = (email: string) => {
    return email.split("@")[0];
  };

  if (!user) {
    return <div>Loading...login..</div>;
  }
  const handleMouseEnter = () => {
    if (user && user.user && (user.user.email || user.user.id)) {
      console.log("setting data", localUserData);
      setLocalUserData({ userId: user.user.id });
    }
  };
  const handleMouseLeave = () => {
    if (user && user.user && (user.user.email || user.user.id)) {
      setLocalUserData(null);
    }
  };

  return (
    <div>
      {/* profile img from profle.img prop  */}
      {user &&
        user.user !== undefined &&
        (user.user.email || user.user?.id) &&
        user.user.email && (
          <Link href={`/${getFilteredEmail(user.user?.email) || user.user.id}`}>
            {/* <button>Go to My Page</button> */}

            <Image
              src={imgUrl}
              alt="Profile Picture"
              width={35}
              height={35}
              className="border-spacing-2 rounded-full border-2 border-solid border-black "
              onMouseEnter={handleMouseEnter}
              onMouseLeave={handleMouseLeave}
            />
          </Link>
        )}
      {!user && (
        <Image
          src={imgUrl}
          alt="Profile Picture"
          width={35}
          height={35}
          className="border-spacing-2 rounded-full border-2 border-solid border-black "
        />
      )}
    </div>
  );
};

export default ProfileButtonXl;

// import React, { useEffect } from "react";
// import Image from "next/image";
// import Link from "next/link";
// import { useSession } from "next-auth/react";
// import { useRoomDataContext } from "../../../utils/context/RoomDataContext";

// const ProfileButtonXl = () => {
//   let imgUrl = require("/public/spongeBobProPic.jpg");
//   const { data: user, status } = useSession();
//   const { roomData, setRoomData } = useRoomDataContext();
//   useEffect(() => {
//     if (user && user.user && user.user.image) {
//       imgUrl = user.user.image;
//     }
//   }, [user]);

//   const getFilteredEmail = (email: string) => {
//     return email.split("@")[0];
//   };

//   if (!user) {
//     return <div>Loading...login..</div>;
//   }
//   const handleMouseEnter = () => {
//     if (user && user.user && (user.user.email || user.user.id)) {
//       console.log("setting data", roomData);
//       setRoomData({ ...roomData, userData: { userId: user.user.id } });
//     }
//   };
//   const handleMouseLeave = () => {
//     if (user && user.user && (user.user.email || user.user.id)) {
//       setRoomData({ ...roomData, userData: { user }, assetData: undefined });
//     }
//   };

//   return (
//     <div>
//       {/* profile img from profle.img prop  */}
//       {user &&
//         user.user !== undefined &&
//         (user.user.email || user.user?.id) &&
//         user.user.email && (
//           <Link href={`/${getFilteredEmail(user.user?.email) || user.user.id}`}>
//             {/* <button>Go to My Page</button> */}

//             <Image
//               src={imgUrl}
//               alt="Profile Picture"
//               width={35}
//               height={35}
//               className="border-spacing-2 rounded-full border-2 border-solid border-black "
//               onMouseEnter={handleMouseEnter}
//               onMouseLeave={handleMouseLeave}
//             />
//           </Link>
//         )}
//       {!user && (
//         <Image
//           src={imgUrl}
//           alt="Profile Picture"
//           width={35}
//           height={35}
//           className="border-spacing-2 rounded-full border-2 border-solid border-black "
//         />
//       )}
//     </div>
//   );
// };

// export default ProfileButtonXl;