import { useSession } from "next-auth/react";
import { handleFollow } from "../../../utils/helpers/handleFollow";
import { UserSchema } from "../../../types/user";
import { Dispatch, useState } from "react";
import { useRoomDataContext } from "../../../utils/context/RoomDataContext";
import { RoomDataSchema } from "../../../types/roomData";
import { api } from "../../../utils/api";
import { v4 } from "uuid";
import UnfollowSvg from "../../svgs/unfollow";
import FollowSvg from "../../svgs/follow";
import TooltipBottom from "../../../utils/helpers/tooltipBottom";
import classNames from "../../../utils/helpers/className";

type Props = {
  followId: string;
  isFollowing: boolean;
  userProfile_: UserSchema;
  setLocalUserData: Dispatch<any>;
  updateLocalData: (newData: UserSchema) => void;
  // setUserProfile_: Dispatch<any>;
  roomData: RoomDataSchema;
  setUserData: Dispatch<any>;
  updateFollowingMutation: ReturnType<
    typeof api.lambda.updateFollowing.useMutation
  >;
  // user: any;
  // setUser: any;
  // handleFollow: (e: any, followId: string) => void;
};

export const FollowButton = (props: Props) => {
  const {
    followId,
    isFollowing,
    userProfile_,
    // setUserProfile_,
    setLocalUserData,
    updateLocalData,
    roomData,
    setUserData,
    updateFollowingMutation,
  } = props;
  const { data: user, status } = useSession();
  console.log("follow button clicked", followId);
  const [followHover, setFollowHover] = useState(false);
  if (!user) {
    return <p>no session data</p>;
  }

  const followProps = {
    userProfile_: userProfile_,
    // setUserProfile_: () => {},
    user: user,
    // setUser: () => {},
    updateLocalData,
    followId: followId,
    isFollowing: isFollowing,
    setUserProfile_: setUserData,
    roomData: roomData,
    setLocalUserData,
    updateFollowingMutation,
  };
  console.log("followProps", followProps);
  return (
    <button
      onClick={(e) => handleFollow(e, followProps)}
      onMouseEnter={() => setFollowHover(true)}
      onMouseLeave={() => setFollowHover(false)}
      className={classNames(
        isFollowing ? "hover:bg-red-600" : "hover:bg-violet-500",
        "group rounded-md border-2 border-transparent bg-violet-600 px-1 py-1 hover:border-white "
      )}
    >
      {isFollowing ? (
        <div className="">
          <div className="flex group-hover:hidden">
            <FollowSvg />
          </div>
          <div className="hidden group-hover:flex">
            <TooltipBottom
              text={<UnfollowSvg />}
              tip={"New Prime Loot"}
              opened={followHover}
              special={true}
            />
          </div>
        </div>
      ) : (
        <div className="flex ">
          <a className=" whitespace-nowrap text-[1.3rem]">Follow</a>
          <div className="flex w-full">
            <FollowSvg />
          </div>
        </div>
      )}
    </button>
  );
};