Untitled

import { XMarkIcon } from "@heroicons/react/24/outline";
import BPPopover from "components/BPPopover/BPPopover";
import Button from "components/Button/Button";
import SearchBar from "components/SearchBar/SearchBar";
import usePopover from "hooks/usePopover";
import useSearch from "hooks/useSearch";
import { AuthContext } from "modules/auth/Auth.provider";
import { AxiosUserListResponse, User } from "modules/user/list/type";
import { fetchUsers } from "modules/user/list/user-list.service";
import { forwardRef, useContext, useImperativeHandle, useState } from "react";
import { useQuery } from "react-query";
import { BPUserAccessHandlerType } from "./type";

const removeDuplicates = (arr: Array<User>) => {
  return arr.filter((obj, pos, arr) => {
    return arr.map(mapObj => mapObj.user_id).indexOf(obj.user_id) === pos;
  });
};

export default forwardRef<BPUserAccessHandlerType>(function BPSearchUser(_, ref) {
  const { clearSearch, handleOnChangeInput, keyword, handleOnChangeKeyword, debouncedKeyword} = useSearch();
  const { isAuthenticated } = useContext(AuthContext);
  const { show, hide, visible } = usePopover();
  const { data } = useQuery<AxiosUserListResponse>(["users", keyword], () => fetchUsers(keyword), {
    enabled: isAuthenticated,
  });
  const [selectedUsers, setSelectedUsers] = useState<Array<User>>([]);
  const [selectedKeywords, setSelectedKeywords] =useState("");
  
  useImperativeHandle(ref, () => ({
    getGroups: () => selectedUsers,
  }));

  const handleOnChangeUser = (id: string) => () => {
    const selected = data?.data?.data?.find(user => user.user_id === id);
    const sKeywords = keyword === id;
    if (selected) {
      handleOnChangeKeyword("");
      setSelectedUsers(prev => removeDuplicates([...prev, selected]));
    }
    if (sKeywords) {
      setSelectedKeywords(keyword);
    }
    console.log(keyword, "MAIN"); 
  };

  const handleOnRemoveSelectedUser = (id: string) => () => {
    const selected = data?.data?.data?.find(user => user.user_id === id);
    const sKeywords = keyword === id;

    if (selected) {
      setSelectedUsers(prev => prev.filter(user => user.user_id !== id));
    }
    if (sKeywords) {
      setSelectedKeywords("");
    }
    console.log(sKeywords, "hi");
  };

  const users = data?.data?.data || [];
  
  return (
    <div className="tw-relative">
      <SearchBar
        label="Search User"
        placeholder="Search User"
        inverted
        value={keyword}
        onClear={clearSearch}
        onChange={handleOnChangeInput}
        onFocus={show}
        onBlur={hide}
      />

      <BPPopover show={visible}>
        {users.map(user => (
          <div
            key={user.user_id}
            className="tw-py-2 tw-px-4 hover:tw-bg-gray-100 tw-cursor-pointer"
            onClick={handleOnChangeUser(user.user_id)}
          >
            <div className="tw-flex tw-items-center tw-justify-between tw-px-2">
                <div className="tw-flex tw-items-center">
                  <img
                    src={user.image_url}
                    alt={user.name}
                    className="tw-h-14 tw-w-14 tw-rounded-full tw-mr-4"
                  />
                  <div>
                    <p className="tw-leading-none">{user.name}</p>
                    <p className="tw-leading-none">{user.designation || "-"}</p>
                  </div>
                </div>
                 <div className=" tw-mb-2 tw-flex tw-justify-items-end "><Button onClick={handleOnChangeUser(user.user_id)} >Add</Button> </div>
                </div>
          </div>
        ))}
         <div
            key={keyword}
            className="tw-py-2 tw-px-4 hover:tw-bg-gray-100 tw-cursor-pointer"
            onClick={handleOnChangeUser(keyword)}
            
          >
            <div className="tw-flex tw-items-center tw-justify-between tw-px-2">
                <div className="tw-flex tw-items-center">
                  <img
                    src={"/assets/recurring-icon.png"}
                    alt={keyword}
                    className="tw-h-14 tw-w-14 tw-rounded-full tw-mr-4"
                  />
                  <div>
                    <p className="tw-leading-none">{keyword}</p>
                    <p className="tw-leading-none">{"-"}</p>
                  </div>
                </div>
                 <div className=" tw-mb-2 tw-flex tw-justify-items-end "><Button onClick={handleOnChangeUser(keyword)} >Invite</Button> </div>
                </div>
          </div>
      </BPPopover>

      {selectedUsers.length > 0 && (
        <div className="tw-border tw-border-solid tw-border-gray-200 tw-mt-4 tw-rounded-xl tw-pt-4 tw-px-4">
          {selectedUsers.map(user => (
            <div key={user.user_id}>
              <div className="tw-flex tw-items-center tw-justify-between tw-px-2">
                <div className="tw-flex tw-items-center">
                  <img
                    src={user.image_url}
                    alt={user.name}
                    className="tw-h-14 tw-w-14 tw-rounded-full tw-mr-4"
                  />
                  <div>
                    <p className="tw-leading-none">{user.email}</p>
                    <p className="tw-leading-none">{user.designation || "-"}</p>
                  </div>
                </div>
                <div
                  className="tw-h-8 tw-w-8 tw-flex tw-justify-center tw-items-center tw-rounded-full hover:tw-bg-gray-200 tw-cursor-pointer"
                  onClick={handleOnRemoveSelectedUser(user.user_id)}
                >
                  <XMarkIcon className="tw-h-6 tw-w-6 tw-text-gray-400" />
                </div>
              </div>
              <hr className="tw-h-[2px] tw-bg-gray-400" />
            </div>
          ))}
        </div>
      )}

      <div className="tw-border tw-border-solid tw-border-gray-200 tw-mt-4 tw-rounded-xl tw-pt-4 tw-px-4">
      <div key={selectedKeywords}>
              <div className="tw-flex tw-items-center tw-justify-between tw-px-2">
                <div className="tw-flex tw-items-center">
                  <img
                    src={"/assets/recurring-icon.png"}
                    alt={selectedKeywords}
                    className="tw-h-14 tw-w-14 tw-rounded-full tw-mr-4"
                  />
                  <div>
                    <p className="tw-leading-none">{selectedKeywords}</p>
                    <p className="tw-leading-none">{"-"}</p>
                  </div>
                </div>
                <div
                  className="tw-h-8 tw-w-8 tw-flex tw-justify-center tw-items-center tw-rounded-full hover:tw-bg-gray-200 tw-cursor-pointer"
                  onClick={handleOnRemoveSelectedUser(selectedKeywords)}
                >
                  <XMarkIcon className="tw-h-6 tw-w-6 tw-text-gray-400" />
                </div>
              </div>
              <hr className="tw-h-[2px] tw-bg-gray-400" />
            </div>
            </div>

    </div>
  );
});