import { PlusCircleFilled } from "@ant-design/icons";
import { Button, Form, Popover } from "antd";
import React, { useContext } from "react";
import { useTranslation } from "react-i18next";
import { connect } from "react-redux";
import { createStructuredSelector } from "reselect";
import { openChatByPhone } from "../../redux/messaging/messaging.actions";
import PhoneFormItem, { PhoneItemFormatterValidation } from "../form-items-formatted/phone-form-item.component";
import SocketContext from "../../contexts/SocketIO/socketContext.jsx";

const mapStateToProps = createStructuredSelector({
  //currentUser: selectCurrentUser
});
const mapDispatchToProps = (dispatch) => ({
  openChatByPhone: (phone) => dispatch(openChatByPhone(phone))
});

export function ChatNewConversation({ openChatByPhone }) {
  const { t } = useTranslation();
  const [form] = Form.useForm();
  const { socket } = useContext(SocketContext);

  const handleFinish = (values) => {
    openChatByPhone({ phone_num: values.phoneNumber, socket });
    form.resetFields();
  };

  const popContent = (
    <div>
      <Form form={form} onFinish={handleFinish}>
        <Form.Item
          label={t("messaging.labels.phonenumber")}
          name="phoneNumber"
          rules={[({ getFieldValue }) => PhoneItemFormatterValidation(getFieldValue, "phoneNumber")]}
        >
          <PhoneFormItem />
        </Form.Item>
        <Button type="primary" htmlType="submit">
          {t("messaging.actions.new")}
        </Button>
      </Form>
    </div>
  );

  return (
    <Popover trigger="click" content={popContent}>
      <PlusCircleFilled />
    </Popover>
  );
}

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