import React from "react";
import CustomAvatar from "../users/Avatar";
import { useSelectedUserStore } from "../../../store/collaboration/useCollabStore";
import { useCamMode } from "../../../store/builder/store";

interface CollabUserIconProps {
  userName: string;
  userImage?: string;
  color: string;
  id: string;
  position?: {
    x: number;
    y: number;
    z: number;
  };
  rotation?: {
    x: number;
    y: number;
    z: number;
  };
  target?: {
    x: number;
    y: number;
    z: number;
  };
}

const CollabUserIcon: React.FC<CollabUserIconProps> = ({
  userImage,
  userName,
  id,
  color,
  position,
  rotation,
  target,
}) => {
  const { setSelectedUser } = useSelectedUserStore();
  const { setCamMode } = useCamMode();
  return (
    <div className="collab-user-live-container">
      <button
        id="live-user-button"
        className="user-image-container"
        onClick={() => {
          if (!position || !rotation || !target) return;
          // Set the selected user in the store
          setSelectedUser({
            id: id,
            color: color,
            name: userName,
            location: { position, rotation, target },
          });
          setCamMode("FollowPerson");
        }}
      >
        {userImage ? (
          <img className="user-image" src={userImage} alt={userName} />
        ) : (
          <CustomAvatar name={userName} color={color} />
        )}
      </button>
      <div className="user-name" style={{ backgroundColor: color }}>
        {userName}
      </div>
    </div>
  );
};

export default CollabUserIcon;