import React, { 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";

interface UserListTemplateProps {
  user: User;
}

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

  function accessUpdate({ option }: AccessOption) {
    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.name}'s profile`}
            />
          ) : (
            <div
              className="no-profile-container"
              style={{ background: user.color }}
            >
              {user.name[0]}
            </div>
          )}
        </div>
        <div className="user-name">{user.name}</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 = localStorage.getItem("userName") || "Anonymous";
  const users = [
    {
      name: "Alice Johnson",
      email: "alice.johnson@example.com",
      profileImage: "",
      color: "#FF6600",
      access: "Admin",
    },
    {
      name: "Bob Smith",
      email: "bob.smith@example.com",
      profileImage: "",
      color: "#488EF6",
      access: "Viewer",
    },
    {
      name: "Charlie Brown",
      email: "charlie.brown@example.com",
      profileImage: "",
      color: "#48AC2A",
      access: "Viewer",
    },
    {
      name: "Diana Prince",
      email: "diana.prince@example.com",
      profileImage: "",
      color: "#D44242",
      access: "Viewer",
    },
  ];
  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 />
          </div>
          <div className="split"></div>
          <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[0]}</div>
                  {userName}
                </div>
                <div className="indicater">you</div>
              </div>
              {users.map((user, index) => (
                <UserListTemplate key={index} user={user} />
              ))}
            </div>
          </div>
        </div>
      </div>
    </RenderOverlay>
  );
};

export default CollaborationPopup;