import React, { useEffect, useMemo, useRef, useState } from "react";
import {
  LastSendMessage,
  ChatUserName,
  LastSendMessageText,
  OnlineBadge,
  OfflineBadge,
} from "../../style";
import {
  fetchChatHistory,
  formatRelativeDate,
  getUserIdLocalStorage,
} from "@/components/common/common";
import { Box, ListItem, ListItemIcon, ListItemText } from "@mui/material";
import _ from "lodash";
import Avatar from "@mui/material/Avatar";
import {
  replaceChat,
  setActiveUser,
  setRoomId,
  setUserProfile,
} from "@/hooks/ChatReducer";
import { BASE_URL_CHAT } from "@/utils/staticValues";
import Auth from "@/auth/Auth";
import { useDispatch, useSelector } from "react-redux";
import UserMenuOptions from "../UserMenuOptions";

interface props {
  showGroupsOnly?: boolean;
}

const ChatUserList = ({ showGroupsOnly = false }: props) => {
  const dispatch = useDispatch();
  const { activeUser, usersList } = useSelector(
    (state: any) => state?.chatData
  );
  const currentLoggedInUsedId = getUserIdLocalStorage();

  const fetchUserProfile = async (user, isOnline) => {
    try {
      const response = await fetch(
        BASE_URL_CHAT +
        `checkUserProfile?room_id=${user?.room_id}&user_id=${user?.id}`,
        {
          method: "GET",
          headers: {
            Authorization: `Bearer ${Auth.token()}`,
            Accept: "application/json",
          },
        }
      );
      const usersProfileData = await response.json();
      if (response?.ok) {
        let updatedUserProfileData = {
          ...usersProfileData?.data,
          isOnline: isOnline,
        };
        dispatch(setUserProfile(updatedUserProfileData));
      }
    } catch (error) {
      console.log(error);
    }
  };
  const newUserList = useMemo(() => {
    return usersList?.filter((user) => user?.is_transfer !== 1);
  }, [usersList])

  return (
    <>
      {newUserList?.map((user) => {
        if (user?.is_group !== 1 && showGroupsOnly) return;
        return (
          <ListItem
            className={
              activeUser?.room_id === user?.room_id ? "activeuser-chat" : ""
            }
            sx={{
              cursor: "pointer",
              "&:hover": {
                backgroundColor: "#F6F6F6",
                "& .doticon": {
                  visibility: "visible",
                  gap: "10px",
                },
              },
            }}
            key={user?.room_id}
            onClick={() => {
              fetchChatHistory({ userId: user.id, isGroup: user?.is_group, roomID: user?.room_id })
                .then((responseData) => {
                  const { message, room_id } = responseData?.data;
                  const { user_status } = responseData || {};
                  const {
                    all: { data, nextPageUrl },
                  } = message;
                  const userIndex = user_status?.findIndex((user) => {
                    const activeUsersID = currentLoggedInUsedId
                      ? currentLoggedInUsedId
                      : activeUser?.id;
                    return user?.user_id !== activeUsersID;
                  });
                  if (userIndex !== -1) {
                    const updatedUser = {
                      ...user,
                      previousChatUrl: nextPageUrl,
                      companyName: user_status[userIndex]?.company,
                    };
                    dispatch(setActiveUser(updatedUser));
                    dispatch(replaceChat(data));
                    dispatch(setRoomId(room_id));
                  }
                })
                .catch((error) => {
                  console.error(error);
                });

              fetchUserProfile(user, user?.online);
            }}
          >
            <ListItemIcon>
              {user?.is_group === 1 ? (
                <Box
                  style={{
                    height: "34px",
                    width: "34px",
                    borderRadius: "50%",
                    boxShadow: " 0px 4px 4px 0px #00000040 inset",
                    backgroundColor: "#EDEDED",
                    display: "flex",
                    alignItems: "center",
                    justifyContent: "center"
                  }}
                >
                  <Avatar
                    alt={user?.name}
                    src="/assets/chat/groupicon.svg"
                    style={{
                      height: "25px",
                      width: "25px",
                      left: 0,
                      right: 0,

                    }}
                  />
                </Box>
              ) : user?.online ? (
                <OnlineBadge
                  overlap="circular"
                  anchorOrigin={{
                    vertical: "bottom",
                    horizontal: "right",
                  }}
                  variant="dot"
                >
                  <Avatar alt={user?.name} src={user?.avatar_original} />
                </OnlineBadge>
              ) : (
                <OfflineBadge
                  overlap="circular"
                  anchorOrigin={{
                    vertical: "bottom",
                    horizontal: "right",
                  }}
                  variant="dot"
                >
                  <Avatar alt={user?.name} src={user?.avatar_original} />
                </OfflineBadge>
              )}
            </ListItemIcon>
            <ListItemText>
              <ChatUserName>
                <div>
                  {user?.is_group === 1 ? user?.display_name : user?.name}
                  {user?.is_pinned === 1 && (
                    <span className="pinicon">
                      <i className="icon-chat-pin"></i>
                    </span>
                  )}
                </div>
                <span>{formatRelativeDate(user?.last_message_time, true)}</span>
              </ChatUserName>
              <LastSendMessage>
                <LastSendMessageText>
                  {user?.is_blocked
                    ? "This user is blocked."
                    : user?.message
                      ? user?.message
                      : "No Chat Initiated"}
                </LastSendMessageText>
                {user?.unread_count > 0 && (
                  <div className="chatmsgnumber">{user?.unread_count}</div>
                )}
              </LastSendMessage>
              <UserMenuOptions user={user} />
            </ListItemText>
          </ListItem>
        );
      })}
    </>
  );
};

export default ChatUserList;