import React, { useCallback, useEffect, useState } from "react";
import Fade from "@mui/material/Fade";
import Slide, { SlideProps } from "@mui/material/Slide";
import { TransitionProps } from "@mui/material/transitions";
import { Grid, Paper, useMediaQuery } from "@mui/material";
import _ from "lodash";
import ChatRoom from "./chatRoom";
import UsersList from "./userList/index";
import { useDispatch, useSelector } from "react-redux";
import {
  chatWindowPopup,
  setAdditionalSuggestions,
  setShowGroupInformationSection,
  setUsersList,
} from "@/hooks/ChatReducer";
import { CSSTransition } from "react-transition-group";
import MessengerButton from "./MessengerButton";
import {
  ChatContainer,
  ChatContent,
  ChatPopupConatiner,
  BigSideFullData,
  AnimatedPaper,
} from "./style";
import dynamic from "next/dynamic";
import { markMessageAsRead, updateUnreadCount } from "../common/common";
import { messageReadEvent } from "./common/events";

const QickAuthPopup = dynamic(
  () => import("./common/components/quickAuthPopup/QickAuthPopup"),
  { ssr: false }
);

if (typeof window !== "undefined") {
  (window as any).Pusher = require("pusher-js");
}

function SlideTransition(props: SlideProps) {
  return <Slide {...props} direction="up" />;
}

const ChatWindow = () => {
  const [isSignInPopupOpen, setIsSignInPopupOpen] = useState<boolean>(false);
  const [isOpen, setIsOpen] = useState<boolean>(false);
  const [toggleSection, setToggleSection] = useState<boolean>(false);
  const [state, setState] = React.useState<{
    open: boolean;
    Transition: React.ComponentType<
      TransitionProps & {
        children: React.ReactElement<any, any>;
      }
    >;
  }>({
    open: false,
    Transition: Fade,
  });

  const {
    user_info: { id, online },
  } = useSelector((state: any) => state?.userData);
  const dispatch = useDispatch();
  const {
    popup,
    activeUser: { room_id, id: activeUserId },
    usersList,
    chats,
  } = useSelector((state: any) => state?.chatData);

  const handleClick =
    (
      Transition: React.ComponentType<
        TransitionProps & {
          children: React.ReactElement<any, any>;
        }
      >
    ) =>
    () => {
      setState({
        open: true,
        Transition,
      });
      let status = 1;
      localStorage?.setItem("reminder", status?.toString());
    };

  const handleClose = () => {
    setState({
      ...state,
      open: false,
    });
    let status = 0;
    localStorage?.setItem("reminder", status?.toString());
  };

  React.useEffect(() => {
    setIsOpen(popup);
  }, [popup]);

  React.useEffect(() => {
    setState({
      ...state,
      open: localStorage?.getItem("reminder") == "1" ? true : false,
    });
  }, []);

  const toggleDiv = () => {
    setIsOpen(!isOpen);
    dispatch(chatWindowPopup(!isOpen));
    document.body.classList.add("chat-bodyadd");
    if (room_id) {
      const updatedUsersList = updateUnreadCount(usersList, room_id);
      dispatch(setUsersList(updatedUsersList));
      const lastMessageIndex = chats?.length - 1;
      const lastMessage = chats?.[lastMessageIndex]?.message;
      const lastMessageId = chats?.[lastMessageIndex]?.id;
      const chatLength = chats?.length;
      messageReadEvent(
        room_id,
        +activeUserId,
        lastMessage,
        "",
        "approved",
        lastMessageId,
        chatLength
      );
      markMessageAsRead(chats[lastMessageIndex]?.messageId, room_id);
    }
  };

  const handleClickOpen = () => {
    setIsSignInPopupOpen(true);
    document.body.classList.add("chat-bodyadd");
  };

  let vh;
  useEffect(() => {
    vh = window.innerHeight * 0.01;
    document.documentElement.style.setProperty("--vh", `${vh}px`);
  }, []);

  const handleAfterSignup = () => {};

  const HandleClose = () => {
    setIsSignInPopupOpen(false);
  };

  const isMobile = useMediaQuery("(max-width:767px)");

  const handleMobileToggleSection = () => {
    setToggleSection(!toggleSection);
  };

  const handleAdditionalSuggestionsPopup = () => {
    dispatch(setAdditionalSuggestions({ isOpen: false }));
  };

  return (
    <ChatContainer>
      <MessengerButton
        state={state}
        id={id}
        online={online}
        handleClick={handleClick}
        SlideTransition={SlideTransition}
        toggleDiv={toggleDiv}
        handleClickOpen={handleClickOpen}
      />
      {id ? (
        <>
          <AnimatedPaper
            elevation={3}
            value={isOpen}
            style={{ display: isMobile ? "none" : "block" }}
          >
            <ChatPopupConatiner>
              {
                <ChatContent>
                  <Grid container component={Paper} className="chatsection">
                    <Grid item xs={7.5} style={{ position: "relative" }}>
                      <BigSideFullData>
                        {isOpen && <ChatRoom />}
                      </BigSideFullData>
                    </Grid>
                    {/* UserList rendeing here */}
                    <Grid
                      item
                      xs={4.5}
                      sx={{ borderLeft: "1px solid #E8E8E8" }}
                    >
                      <UsersList />
                    </Grid>
                  </Grid>
                </ChatContent>
              }
            </ChatPopupConatiner>
            {/* <AdditionalSuggestionContent
              handleAdditionalSuggestionsPopup={
                handleAdditionalSuggestionsPopup
              }
            /> */}
          </AnimatedPaper>

          {isMobile && popup && (
            <AnimatedPaper elevation={3} value={isOpen}>
              <ChatPopupConatiner>
                <ChatContent>
                  <>
                    <CSSTransition
                      in={toggleSection}
                      timeout={300}
                      classNames="slide"
                      unmountOnExit
                    >
                      <Grid item xs={7.5} style={{ position: "relative" }}>
                        <BigSideFullData>
                          {isOpen && (
                            <ChatRoom
                              handleMobileToggleSection={
                                handleMobileToggleSection
                              }
                              toggleSection={toggleSection}
                            />
                          )}
                        </BigSideFullData>
                      </Grid>
                    </CSSTransition>

                    <CSSTransition
                      in={!toggleSection}
                      timeout={300}
                      classNames="slide"
                      unmountOnExit
                    >
                      <Grid
                        item
                        xs={4.5}
                        sx={{ borderLeft: "1px solid #E8E8E8" }}
                      >
                        <UsersList
                          handleMobileToggleSection={handleMobileToggleSection}
                        />
                      </Grid>
                    </CSSTransition>
                  </>
                </ChatContent>
              </ChatPopupConatiner>
              {/* <AdditionalSuggestionContent
                handleAdditionalSuggestionsPopup={
                  handleAdditionalSuggestionsPopup
                }
              /> */}
            </AnimatedPaper>
          )}
        </>
      ) : (
        <QickAuthPopup
          handleClose={HandleClose}
          handleAfterSignup={handleAfterSignup}
          isSignInPopupOpen={isSignInPopupOpen}
        />
      )}
    </ChatContainer>
  );
};
export default ChatWindow;