import React, { useEffect, useState } from "react";
import { Box, Button } from "@mui/material";
import SubAccountLists from "./SubAccountLists";
import SearchUser from "./SearchUser";
import { BASE_URL_CHAT } from "@/utils/staticValues";
import Auth from "@/auth/Auth";
import { useDispatch, useSelector } from "react-redux";
import ChatUserList from "../chatUserLists";
import { setUsersList, setUserTabs } from "@/hooks/ChatReducer";
import {
  ActionButton,
  BoldHeadings,
  CreateButton4All,
  GroupAvailable,
  GroupNotAvailable,
} from "@/components/ChatModule/style";
import { UserListBox } from "../../style";

const GroupChat = (props) => {
  const { setIsInitiatingGroup, isInitiatingGroup } = props;
  const [showFirstDiv, setShowFirstDiv] = useState(true);
  const { usersList } = useSelector((state: any) => state?.chatData);
  const [anchorEl, setAnchorEl] = React.useState<null | HTMLElement>(null);
  const [searchQuery, setSearchQuery] = useState("");
  const [filteredUsers, setFilteredUsers] = useState<any>([]);

  const [selectedUsers, setSelectedUsers] = React.useState([]);

  const dispatch = useDispatch();

  const canBeOpen = open && Boolean(anchorEl);
  const id = canBeOpen ? "transition-popper" : undefined;

  const filteredUsersFromGroup = usersList.filter(
    (user) => user?.is_group == null
  );

  const handleToggle = () => {
    setShowFirstDiv(!showFirstDiv);
    setIsInitiatingGroup(!isInitiatingGroup);
  };

  const handleClickChip = (value) => {
    setSelectedUsers(value);
  };

  const handleDeleteChip = (userToDelete) => {
    setSelectedUsers((prev) =>
      prev?.filter((user) => user?.id !== userToDelete?.id)
    );
  };

  useEffect(() => {
    if (searchQuery !== "") {
      const searchTerm = searchQuery?.toLowerCase();
      const updatedUsers = filteredUsersFromGroup?.filter((user) => {
        const name = user?.name?.toLowerCase();
        return name?.includes(searchTerm);
      });
      setFilteredUsers(updatedUsers);
    } else {
      setFilteredUsers(filteredUsersFromGroup);
    }
  }, [searchQuery]);

  const handleGroupCreate = async () => {
    const userId = selectedUsers.map((user) => user.id).join(",");
    const displayName = "Group Name";

    const formData = new FormData();
    formData.append("group_name", displayName);
    formData.append("users_id", userId);
    formData.append("is_group", "true");

    const response = await fetch(`${BASE_URL_CHAT}create-group-chat`, {
      method: "POST",
      headers: {
        Authorization: `Bearer ${Auth?.token()}`,
      },
      body: formData,
    });
    const responseJson = await response.json();
    if (responseJson.status === true) {
      const { data, group_users } = responseJson;
      const newGroupDetails = {
        display_name: displayName,
        group_id: data,
        room_id: data,
        is_group: 1,
        unread_count: 0,
        is_pinned: "0",
        is_archived: 0,
        is_blocked: 0,
        id: userId,
        group_users,
      };
      const clonedUserListsData = [...usersList, newGroupDetails];
      // clonedUserListsData.push(newGroupDetails);
      dispatch(setUsersList(clonedUserListsData));
      setShowFirstDiv(!showFirstDiv);
      setIsInitiatingGroup(!isInitiatingGroup);
    }
  };

  const isGroupsAvailable = usersList?.some((user) => user.is_group === 1);

  return (
    <>
      {/* <EmptyUserList>
      <EmptyBigChatRoomLeft> */}
      {/* <OuterChatContainer> */}
      <Box>
        {showFirstDiv && !isInitiatingGroup ? (
          <>
            {isGroupsAvailable ? (
              <GroupAvailable>
                <center>
                  <CreateButton4All
                    sx={{ marginBottom: "10px" }}
                    size="small"
                    aria-describedby={id}
                    type="button"
                    onClick={handleToggle}
                  >
                    Create New Group
                  </CreateButton4All>
                </center>
                <UserListBox
                  sx={{
                    position: "relative",
                    width: "100%",
                    maxHeight: props?.isAdmin == "admin" ? "100%" : "350px",
                    minHeight: props?.isAdmin == "admin" ? "100%" : "350px",
                    height: props?.isAdmin == "admin" ? "100%" : "350px",
                  }}
                >
                  <ChatUserList showGroupsOnly={true} />
                </UserListBox>
              </GroupAvailable>
            ) : (
              <GroupNotAvailable>
                <img src="/assets/chat/group-image.svg" width={60} />
                <BoldHeadings sx={{ fontSize: "14px" }}>
                  No Groups List Here
                </BoldHeadings>
                <center>
                  <CreateButton4All
                    size="small"
                    aria-describedby={id}
                    type="button"
                    onClick={handleToggle}
                  >
                    Create New Group
                  </CreateButton4All>
                </center>
              </GroupNotAvailable>
            )}
          </>
        ) : (
          <Box sx={{ p: 1, bgcolor: "background.paper" }}>
            <SearchUser
              selectedUsers={selectedUsers}
              handleClickChip={handleClickChip}
              handleDeleteChip={handleDeleteChip}
              setSearchQuery={setSearchQuery}
              searchQuery={searchQuery}
            />
            <ActionButton>
              <Button
                variant="outlined"
                className="addbtnn"
                size="small"
                onClick={() => {
                  dispatch(
                    setUserTabs({
                      showAllUsers: true,
                      showArchiveUsers: false,
                      showUnreadUsers: false,
                      showBlockedUsers: false,
                      showNewRequestUsers: false,
                    })
                  );
                  setShowFirstDiv(!showFirstDiv);
                  setIsInitiatingGroup(!isInitiatingGroup);
                }}
              >
                Cancel
              </Button>
              <Button
                variant="outlined"
                className="addbtnn"
                size="small"
                onClick={() => {
                  dispatch(
                    setUserTabs({
                      showAllUsers: true,
                      showArchiveUsers: false,
                      showUnreadUsers: false,
                      showBlockedUsers: false,
                      showNewRequestUsers: false,
                    })
                  );
                  handleGroupCreate();
                }}
                disabled={selectedUsers?.length <= 1}
              >
                Add
              </Button>
            </ActionButton>
            <SubAccountLists
              usersList={filteredUsers}
              selectedUsers={selectedUsers}
              setSelectedUsers={setSelectedUsers}
            />
          </Box>
        )}
        <div></div>
      </Box>
    </>
  );
};

export default GroupChat;