import { Button, Form, Input, notification } from "antd";
import React from "react";
import { useTranslation } from "react-i18next";
import { connect } from "react-redux";
import { createStructuredSelector } from "reselect";
import { updateUserDetails } from "../../redux/user/user.actions";
import { selectCurrentUser } from "../../redux/user/user.selectors";
import ResetForm from "../form-items-formatted/reset-form-item.component";

const mapStateToProps = createStructuredSelector({
  currentUser: selectCurrentUser
});
const mapDispatchToProps = dispatch => ({
  updateUserDetails: userDetails => dispatch(updateUserDetails(userDetails))
});
export default connect(
  mapStateToProps,
  mapDispatchToProps
)(function ProfileMyComponent({
  currentUser,

  updateUserDetails
}) {
  const [form] = Form.useForm();
  const { isFieldsTouched, resetFields } = form;
  const { t } = useTranslation();

  const handleSubmit = e => {
    e.preventDefault();

    form.validateFieldsAndScroll((err, values) => {
      if (err) {
        notification["error"]({
          message: t("jobs.errors.validationtitle"),
          description: t("jobs.errors.validation")
        });
      }
      if (!err) {
        console.log("values", values);
        updateUserDetails({
          displayName: values.displayname,
          photoURL: values.photoURL
        });
      }
    });
  };

  return (
    <div>
      {isFieldsTouched() ? <ResetForm resetFields={resetFields} /> : null}

      <Form onSubmit={handleSubmit} autoComplete={"no"}>
        <Form.Item
          label={t("user.fields.displayname")}
          rules={[{ required: true }]}
          name="displayname"
        >
          <Input />)
        </Form.Item>
        <Form.Item label={t("user.fields.photourl")} name="photoURL">
          <Input />
        </Form.Item>

        <Button
          type="primary"
          key="submit"
          htmlType="submit"
          onClick={handleSubmit}
        >
          {t("user.actions.updateprofile")}
        </Button>
      </Form>
    </div>
  );
});
