import React, { useEffect, useState } from "react";
import { AppDockIcon } from "../../icons/HeaderIcons";
import orgImg from "../../../assets/orgTemp.png";
import { useActiveUsers } from "../../../store/store";
import { getAvatarColor } from "../../../modules/collaboration/users/functions/getAvatarColor";
import { ActiveUser } from "../../../types/users";
import CollaborationPopup from "../../templates/CollaborationPopup";

const Header: React.FC = () => {
  const { activeUsers } = useActiveUsers();
  const userName = localStorage.getItem("userName") || "Anonymous";

  const guestUsers: ActiveUser[] = activeUsers.filter(
    (user: ActiveUser) => user.userName !== userName
  );
  
  const [userManagement, setUserManagement] = useState(false);

  return (
    <>
      {userManagement && (
        <CollaborationPopup setUserManagement={setUserManagement} />
      )}
      <div className="header-container">
        <div className="options-container">
          <div
            className="share-button"
            onClick={() => {
              setUserManagement(true);
            }}
          >
            Share
          </div>
          <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) => (
              <div
                key={index}
                className="user-profile"
                style={{ background: getAvatarColor(index) }}
              >
                {user.userName[0]}
              </div>
            ))}
          </div>
          <div className="user-profile-container">
            <div
              className="user-profile"
              style={{ background: "var(--accent-color)" }}
            >
              {userName[0]}
            </div>
            <div className="user-organization">
              <img src={orgImg} alt="" />
            </div>
          </div>
        </div>
      </div>
    </>
  );
};

export default Header;