import React from "react";
import { useSelector } from "react-redux";
import { Box, useMediaQuery } from "@mui/material";
import KeyboardArrowUpIcon from "@mui/icons-material/KeyboardArrowUp";
import UserBadge from "./common/components/user-badge";
import { calculateTotalUnreadArchivedMessages } from "../common/common";
import {
  ChatMessangerWindow,
  MessangerTxt,
  Footer_activeStatus,
} from "./style";

const MessengerButton = ({
  state,
  online,
  id,
  handleClick,
  SlideTransition,
  toggleDiv,
  handleClickOpen,
}) => {
  const { usersList, chatRequest } = useSelector(
    (state: any) => state?.chatData
  );
  const isMobile = useMediaQuery("(max-width:767px)");

  let { unreadMessageCount } = calculateTotalUnreadArchivedMessages(usersList);
  const chatRequestAndUnreadCount = chatRequest?.length + unreadMessageCount;

  return (
    <>
      {!state.open && (
        <ChatMessangerWindow onClick={handleClick(SlideTransition)}>
          <MessangerTxt>
            <i className="icon-livechat">
              <span className="path1"></span>
              <span className="path2"></span>
            </i>
            Messenger{" "}
            <span className="chatcount">
              {" "}
              {chatRequestAndUnreadCount > 0 && (
                <span className="total-count">{chatRequestAndUnreadCount}</span>
              )}
            </span>
            <Footer_activeStatus>
              {id && <UserBadge status={online} showAvatar={false} />}
            </Footer_activeStatus>
          </MessangerTxt>
        </ChatMessangerWindow>
      )}
      <div>
        <ChatMessangerWindow
          onClick={id ? toggleDiv : handleClickOpen}
          style={{ display: isMobile ? "none" : "block" }}
        >
          <MessangerTxt>
            <Box>
              <div>
                <i className="icon-livechat">
                  <span className="path1"></span>
                  <span className="path2"></span>
                </i>
                Messenger{" "}
                <span className="chatcount">
                  {" "}
                  {chatRequestAndUnreadCount > 0 && (
                    <span className="total-count">
                      {chatRequestAndUnreadCount}
                    </span>
                  )}
                </span>
              </div>
            </Box>
            <Footer_activeStatus
              className="aaa"
              sx={{ display: "flex", alignItems: "center", gap: "4px" }}
            >
              {id && <UserBadge status={online} showAvatar={false} />}
              <KeyboardArrowUpIcon />
            </Footer_activeStatus>
          </MessangerTxt>
        </ChatMessangerWindow>
      </div>
    </>
  );
};

export default MessengerButton;