import React, { useState } from "react";
import orgImg from "../../../assets/image/orgTemp.png";
import { useActiveUsers, useCamMode } from "../../../store/builder/store";
import { ActiveUser } from "../../../types/users";
import CollaborationPopup from "../../templates/CollaborationPopup";
import { getAvatarColor } from "../../../modules/collaboration/functions/getAvatarColor";
import { useSelectedUserStore } from "../../../store/collaboration/useCollabStore";
import { useToggleStore } from "../../../store/useUIToggleStore";
import { ToggleSidebarIcon } from "../../icons/HeaderIcons";
import useModuleStore from "../../../store/useModuleStore";

const Header: React.FC = () => {
  const { activeUsers } = useActiveUsers();
  const userName = localStorage.getItem("userName") ?? "Anonymous";
  const { toggleUILeft, toggleUIRight, setToggleUI } = useToggleStore();
  const { activeModule } = useModuleStore();

  const guestUsers: ActiveUser[] = activeUsers.filter(
    (user: ActiveUser) => user.userName !== userName
  );

  const [userManagement, setUserManagement] = useState(false);
  const { setSelectedUser } = useSelectedUserStore();
  const { setCamMode } = useCamMode();

  function handleUserFollow(user: any, index: number) {
    const position = {
      x: user.position?.x!,
      y: user.position?.y!,
      z: user.position?.z!,
    };
    const target = {
      x: user.target?.x!,
      y: user.target?.y!,
      z: user.target?.z!,
    };
    const rotation = {
      x: user.rotation?.x!,
      y: user.rotation?.y!,
      z: user.rotation?.z!,
    };

    // retun on no data
    if (!position || !target || !rotation) return;

    // Set the selected user in the store
    setSelectedUser({
      color: getAvatarColor(index, user.userName),
      name: user.userName,
      id: user.id,
      location: { position, rotation, target },
    });
    setCamMode("FollowPerson");
  }

  return (
    <>
      {userManagement && (
        <CollaborationPopup setUserManagement={setUserManagement} />
      )}
      <div className="header-container">
        <div className="options-container">
          <button
            id="toggle-rightSidebar-ui-button"
            className={`toggle-sidebar-ui-button ${!toggleUIRight ? "active" : ""
              }`}
            onClick={() => {
              if (activeModule !== "market") {
                setToggleUI(toggleUILeft, !toggleUIRight);
                localStorage.setItem(
                  "navBarUiRight",
                  JSON.stringify(!toggleUIRight)
                );
              }
            }}
          >
            <div className="tooltip">
              {toggleUIRight ? "Hide" : "Show"} sidebar (ctrl + ])
            </div>
            <ToggleSidebarIcon />
          </button>
          <button
            id="share-button"
            className="share-button"
            onClick={() => {
              setUserManagement(true);
            }}
          >
            Share
          </button>
          {/* <div className="app-docker-button">
            <AppDockIcon />
          </div> */}
        </div>
        <div className="split"></div>
        <div className="users-container">
          <div className="guest-users-container">
            {guestUsers.length > 3 && (
              <div className="other-guest">+{guestUsers.length - 3}</div>
            )}
            {guestUsers.slice(0, 3).map((user, index) => (
              <button
                id="user-profile-button"
                key={`${index}-${user.userName}`}
                className="user-profile"
                style={{ background: getAvatarColor(index, user.userName) }}
                onClick={() => {
                  handleUserFollow(user, index);
                }}
              >
                {user.userName[0]}
              </button>
            ))}
          </div>
          <div className="user-profile-container">
            <div className="user-profile">{userName[0]}</div>
            <div className="user-organization">
              <img src={orgImg} alt="" />
            </div>
          </div>
        </div>
      </div>
    </>
  );
};

export default Header;