import React, { useEffect, useState } from "react";
import RenderOverlay from "./Overlay";
import { CloseIcon } from "../icons/ExportCommonIcons";
import { AccessOption, User } from "../../types/users";
import RegularDropDown from "../ui/inputs/RegularDropDown";
import MultiEmailInvite from "../ui/inputs/MultiEmailInvite";
import { getUserData } from "../../functions/getUserData";
import { getProjectSharedList } from "../../services/factoryBuilder/collab/project/getProjectSharedList";
import { useParams } from "react-router-dom";
import { shareAccess } from "../../services/factoryBuilder/collab/project/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 { 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();
    }, []);

    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;