import { LoadingOutlined, SendOutlined } from "@ant-design/icons";
import { Input, Spin } from "antd";
import React, { useEffect, useRef, useState } from "react";
import { useTranslation } from "react-i18next";
import { connect } from "react-redux";
import { createStructuredSelector } from "reselect";
import { logImEXEvent } from "../../firebase/firebase.utils";
import {
  sendMessage,
  setMessage,
} from "../../redux/messaging/messaging.actions";
import {
  selectIsSending,
  selectMessage,
} from "../../redux/messaging/messaging.selectors";
import { selectBodyshop } from "../../redux/user/user.selectors";
import ChatMediaSelector from "../chat-media-selector/chat-media-selector.component";
import ChatPresetsComponent from "../chat-presets/chat-presets.component";

const mapStateToProps = createStructuredSelector({
  bodyshop: selectBodyshop,
  isSending: selectIsSending,
  message: selectMessage,
});

const mapDispatchToProps = (dispatch) => ({
  sendMessage: (message) => dispatch(sendMessage(message)),
  setMessage: (message) => dispatch(setMessage(message)),
});

function ChatSendMessageComponent({
  conversation,
  bodyshop,
  sendMessage,
  isSending,
  message,
  setMessage,
}) {
  const inputArea = useRef(null);
  const [selectedMedia, setSelectedMedia] = useState([]);
  useEffect(() => {
    inputArea.current.focus();
  }, [isSending, setMessage]);

  const { t } = useTranslation();

  const handleEnter = () => {
    const selectedImages = selectedMedia.filter((i) => i.isSelected);
    if ((message === "" || !message) && selectedImages.length === 0) return;
    logImEXEvent("messaging_send_message");

    if (selectedImages.length < 11) {
      sendMessage({
        to: conversation.phone_num,
        body: message || "",
        messagingServiceSid: bodyshop.messagingservicesid,
        conversationid: conversation.id,
        selectedMedia: selectedImages,
        imexshopid: bodyshop.imexshopid,
      });
      setSelectedMedia(
        selectedMedia.map((i) => {
          return { ...i, isSelected: false };
        })
      );
    }
  };

  return (
    <div className="imex-flex-row" style={{ width: "100%" }}>
      <ChatPresetsComponent className="imex-flex-row__margin" />
      <ChatMediaSelector
        conversation={conversation}
        selectedMedia={selectedMedia}
        setSelectedMedia={setSelectedMedia}
      />
      <span style={{ flex: 1 }}>
        <Input.TextArea
          className="imex-flex-row__margin imex-flex-row__grow"
          allowClear
          autoFocus
          ref={inputArea}
          autoSize={{ minRows: 1, maxRows: 4 }}
          value={message}
          disabled={isSending}
          placeholder={t("messaging.labels.typeamessage")}
          onChange={(e) => setMessage(e.target.value)}
          onPressEnter={(event) => {
            event.preventDefault();
            if (!!!event.shiftKey) handleEnter();
          }}
        />
      </span>
      <SendOutlined
        className="imex-flex-row__margin"
        //  disabled={message === "" || !message}
        onClick={handleEnter}
      />
      <Spin
        style={{ display: `${isSending ? "" : "none"}` }}
        indicator={
          <LoadingOutlined
            style={{
              fontSize: 24,
            }}
            spin
          />
        }
      />
    </div>
  );
}
export default connect(
  mapStateToProps,
  mapDispatchToProps
)(ChatSendMessageComponent);