import parsePhoneNumber from "libphonenumber-js";
import React, { useContext } from "react";
import { useTranslation } from "react-i18next";
import { connect } from "react-redux";
import { openChatByPhone } from "../../redux/messaging/messaging.actions";
import PhoneNumberFormatter from "../../utils/PhoneFormatter";

import { createStructuredSelector } from "reselect";
import { selectBodyshop } from "../../redux/user/user.selectors";
import { searchingForConversation } from "../../redux/messaging/messaging.selectors";
import SocketContext from "../../contexts/SocketIO/socketContext.jsx";
import { useNotification } from "../../contexts/Notifications/notificationContext.jsx";

const mapStateToProps = createStructuredSelector({
  bodyshop: selectBodyshop,
  searchingForConversation: searchingForConversation
});

const mapDispatchToProps = (dispatch) => ({
  openChatByPhone: (phone) => dispatch(openChatByPhone(phone))
});

export function ChatOpenButton({ bodyshop, searchingForConversation, phone, jobid, openChatByPhone }) {
  const { t } = useTranslation();
  const { socket } = useContext(SocketContext);
  const notification = useNotification();

  if (!phone) return <></>;

  if (!bodyshop.messagingservicesid) return <PhoneNumberFormatter>{phone}</PhoneNumberFormatter>;

  return (
    <a
      href="# "
      onClick={(e) => {
        e.stopPropagation();
        const p = parsePhoneNumber(phone, "CA");
        if (searchingForConversation) return; //This is to prevent finding the same thing twice.
        if (p && p.isValid()) {
          openChatByPhone({ phone_num: p.formatInternational(), jobid: jobid, socket });
        } else {
          notification["error"]({ message: t("messaging.error.invalidphone") });
        }
      }}
    >
      <PhoneNumberFormatter>{phone}</PhoneNumberFormatter>
    </a>
  );
}

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