import { InfoCircleOutlined, MessageOutlined, ShrinkOutlined, SyncOutlined } from "@ant-design/icons";
import { useLazyQuery, useQuery } from "@apollo/client";
import { Badge, Card, Col, Row, Space, Tag, Tooltip, Typography } from "antd";
import React, { useCallback, useEffect, useState } from "react";
import { useTranslation } from "react-i18next";
import { connect } from "react-redux";
import { createStructuredSelector } from "reselect";
import { CONVERSATION_LIST_QUERY, UNREAD_CONVERSATION_COUNT } from "../../graphql/conversations.queries";
import { toggleChatVisible } from "../../redux/messaging/messaging.actions";
import { selectChatVisible, selectSelectedConversation } from "../../redux/messaging/messaging.selectors";
import ChatConversationListComponent from "../chat-conversation-list/chat-conversation-list.component";
import ChatConversationContainer from "../chat-conversation/chat-conversation.container";
import ChatNewConversation from "../chat-new-conversation/chat-new-conversation.component";
import LoadingSpinner from "../loading-spinner/loading-spinner.component";
import "./chat-popup.styles.scss";

const mapStateToProps = createStructuredSelector({
  selectedConversation: selectSelectedConversation,
  chatVisible: selectChatVisible
});
const mapDispatchToProps = (dispatch) => ({
  toggleChatVisible: () => dispatch(toggleChatVisible())
});

export function ChatPopupComponent({ chatVisible, selectedConversation, toggleChatVisible }) {
  const { t } = useTranslation();
  const [pollInterval, setpollInterval] = useState(0);

  const { data: unreadData } = useQuery(UNREAD_CONVERSATION_COUNT, {
    fetchPolicy: "network-only",
    nextFetchPolicy: "network-only",
    ...(pollInterval > 0 ? { pollInterval } : {})
  });

  const [getConversations, { loading, data, refetch, fetchMore }] = useLazyQuery(CONVERSATION_LIST_QUERY, {
    fetchPolicy: "network-only",
    nextFetchPolicy: "network-only",
    skip: !chatVisible,
    ...(pollInterval > 0 ? { pollInterval } : {})
  });

  const fcmToken = sessionStorage.getItem("fcmtoken");

  useEffect(() => {
    if (fcmToken) {
      setpollInterval(0);
    } else {
      setpollInterval(90000);
    }
  }, [fcmToken]);

  useEffect(() => {
    if (chatVisible)
      getConversations({
        variables: {
          offset: 0
        }
      });
  }, [chatVisible, getConversations]);

  const loadMoreConversations = useCallback(() => {
    if (data)
      fetchMore({
        variables: {
          offset: data.conversations.length
        }
      });
  }, [data, fetchMore]);

  const unreadCount = unreadData?.messages_aggregate.aggregate.count || 0;

  return (
    <Badge count={unreadCount}>
      <Card size="small">
        {chatVisible ? (
          <div className="chat-popup">
            <Space align="center">
              <Typography.Title level={4}>{t("messaging.labels.messaging")}</Typography.Title>
              <ChatNewConversation />
              <Tooltip title={t("messaging.labels.recentonly")}>
                <InfoCircleOutlined />
              </Tooltip>
              <SyncOutlined style={{ cursor: "pointer" }} onClick={() => refetch()} />
              {pollInterval > 0 && <Tag color="yellow">{t("messaging.labels.nopush")}</Tag>}
            </Space>
            <ShrinkOutlined
              onClick={() => toggleChatVisible()}
              style={{ position: "absolute", right: ".5rem", top: ".5rem" }}
            />

            <Row gutter={[8, 8]} className="chat-popup-content">
              <Col span={8}>
                {loading ? (
                  <LoadingSpinner />
                ) : (
                  <ChatConversationListComponent
                    conversationList={data ? data.conversations : []}
                    loadMoreConversations={loadMoreConversations}
                  />
                )}
              </Col>
              <Col span={16}>{selectedConversation ? <ChatConversationContainer /> : null}</Col>
            </Row>
          </div>
        ) : (
          <div onClick={() => toggleChatVisible()} style={{ cursor: "pointer" }}>
            <MessageOutlined className="chat-popup-info-icon" />
            <strong>{t("messaging.labels.messaging")}</strong>
          </div>
        )}
      </Card>
    </Badge>
  );
}

export default connect(mapStateToProps, mapDispatchToProps)(ChatPopupComponent);