import { PlusCircleFilled } from "@ant-design/icons";
import { Button, Form, Popover } from "antd";
import React 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";

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 handleFinish = (values) => {
    openChatByPhone({ phone_num: values.phoneNumber });
    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);