import React, { useEffect, useState } from "react";
import RenderOverlay from "./Overlay";
import { ArrowIcon, CloseIcon } from "../icons/ExportCommonIcons";
import { AccessOption, User } from "../../types/users";
import RegularDropDown from "../ui/inputs/RegularDropDown";
import { access } from "fs";
import MultiEmailInvite from "../ui/inputs/MultiEmailInvite";
import { useActiveUsers } from "../../store/builder/store";
import { getUserData } from "../../functions/getUserData";
import { getProjectSharedList } from "../../services/factoryBuilder/collab/getProjectSharedList";
import { useParams } from "react-router-dom";
import { shareAccess } from "../../services/factoryBuilder/collab/shareAccess";
import { getAvatarColor } from "../../modules/collaboration/functions/getAvatarColor";

interface UserListTemplateProps {
  user: User;
}

const UserListTemplate: React.FC<UserListTemplateProps> = ({ user }) => {
  const [accessSelection, setAccessSelection] = useState<string>(user?.Access);
  const { projectId } = useParams();

  const accessUpdate = async ({ option }: AccessOption) => {
    if (!projectId) return
    const accessSelection = await shareAccess(projectId, user.userId, option)
    setAccessSelection(option);
  }

  return (
    <div className="user-list-container">
      <div className="user-details">
        <div className="profile-image">
          {user.profileImage ? (
            <img
              src={user.profileImage || "https://via.placeholder.com/150"}
              alt={`${user.
                userName}'s profile`}
            />
          ) : (
            <div
              className="no-profile-container"
              style={{ background: getAvatarColor(1, user.userId) }}
            >
              {user.
                userName.charAt(0).toUpperCase()}
            </div>
          )}
        </div>
        <div className="user-name"> {user.
          userName.charAt(0).toUpperCase() + user.
            userName.slice(1).toLowerCase()}</div>
      </div>
      <div className="user-access">
        <RegularDropDown
          header={accessSelection}
          options={["Admin", "User", "Viewer"]}
          onSelect={(option) => accessUpdate({ option })}
          search={false}
        />
        {/* <ArrowIcon /> */}
      </div>
    </div>
  );
};

interface CollaborateProps {
  setUserManagement: (value: boolean) => void;
}

const CollaborationPopup: React.FC<CollaborateProps> = ({
  setUserManagement,
}) => {
  const { activeUsers } = useActiveUsers();
  const { userName } = getUserData();
  const [users, setUsers] = useState([])
  const { projectId } = useParams();

  function getData() {
    if (!projectId) return;
    getProjectSharedList(projectId).then((allUser) => {
      const accesMail = allUser?.datas || []
      setUsers(accesMail)
    }).catch((err) => {

    })
  }

  useEffect(() => {
    getData();
  }, [])

  useEffect(() => {
    // 
  }, [activeUsers]);
  return (
    <RenderOverlay>
      <div
        className="collaboration-popup-wrapper"
        onClick={() => {
          setUserManagement(false);
        }}
      >
        <div
          className="collaboration-popup-container"
          onClick={(e) => {
            e.preventDefault();
            e.stopPropagation();
          }}
        >
          <div className="header">
            <div className="content">Share this file</div>
            <div className="content">
              {/* <div className="copy-link-button">copy link</div> */}
              <div
                className="close-button"
                onClick={() => {
                  setUserManagement(false);
                }}
              >
                <CloseIcon />
              </div>
            </div>
          </div>
          <div className="invite-input-container">
            <MultiEmailInvite users={users} getData={getData} />
          </div>
          <div className="split"></div>
          <section>
            <div className="access-and-user-control-container">
              <div className="user-header">Who has access</div>
              <div className="general-access-container">
                <div className="team-container">
                  <div className="project-name">Untitled</div>
                  <div className="number-of-peoples-have-access">
                    {users.length} persons
                  </div>
                </div>
              </div>
              <div className="users-list-container">
                <div className="you-container">
                  <div className="your-name">
                    <div className="user-profile">{userName && userName[0].toUpperCase()}</div>
                    {userName && userName.charAt(0).toUpperCase() + userName.slice(1).toLowerCase()}
                  </div>
                  <div className="indicater">you</div>
                </div>
                {users.map((user, index) => (
                  <UserListTemplate key={index} user={user} />
                ))}
              </div>
            </div>
          </section>
        </div>
      </div>
    </RenderOverlay>
  );
};

export default CollaborationPopup;
