import { MessageFilled } from "@ant-design/icons";
import { notification } from "antd";
import parsePhoneNumber from "libphonenumber-js";
import React from "react";
import { useTranslation } from "react-i18next";
import { connect } from "react-redux";
import { openChatByPhone } from "../../redux/messaging/messaging.actions";

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

export function ChatOpenButton({ phone, jobid, openChatByPhone }) {
  const { t } = useTranslation();
  return (
    <MessageFilled
      style={{ margin: 4 }}
      onClick={(e) => {
        e.stopPropagation();
        const p = parsePhoneNumber(phone, "CA");
        console.log(
          "🚀  ~ file: chat-open-button.component.jsx  ~ line 21  ~ p",
          p
        );

        if (p && p.isValid()) {
          openChatByPhone({ phone_num: p.formatInternational(), jobid: jobid });
        } else {
          notification["error"]({ message: t("messaging.error.invalidphone") });
        }
      }}
    />
  );
}
export default connect(null, mapDispatchToProps)(ChatOpenButton);