import { Button, Form, Input, notification } from "antd";
import { LockOutlined } from "@ant-design/icons";
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 {
  logImEXEvent,
  updateCurrentPassword,
} from "../../firebase/firebase.utils";
import LayoutFormRow from "../layout-form-row/layout-form-row.component";

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

  const handleFinish = (values) => {
    logImEXEvent("profile_update");

    updateUserDetails({
      displayName: values.displayName,
      photoURL: values.photoURL,
    });
  };

  const handleChangePassword = async ({ password }) => {
    logImEXEvent("password_update");
    try {
      await updateCurrentPassword(password);
      notification.success({
        message: t("user.successess.passwordchanged"),
      });
    } catch (error) {
      notification.error({
        message: error.message,
      });
    }
  };

  return (
    <div>
      <Form
        onFinish={handleFinish}
        autoComplete={"no"}
        initialValues={currentUser}
        layout="vertical"
      >
        <LayoutFormRow>
          <Form.Item
            label={t("user.fields.displayname")}
            rules={[
              {
                required: true,
                //message: t("general.validation.required"),
              },
            ]}
            name="displayName"
          >
            <Input />
          </Form.Item>
          <Form.Item label={t("user.fields.photourl")} name="photoURL">
            <Input />
          </Form.Item>
        </LayoutFormRow>

        <Button type="primary" key="submit" htmlType="submit">
          {t("user.actions.updateprofile")}
        </Button>
      </Form>
      <Form
        onFinish={handleChangePassword}
        autoComplete={"no"}
        initialValues={currentUser}
        layout="vertical"
      >
        <LayoutFormRow>
          <Form.Item label={t("general.labels.newpassword")} name="password">
            <Input
              prefix={<LockOutlined />}
              type="password"
              placeholder={t("general.labels.password")}
            />
          </Form.Item>
          <Form.Item
            label={t("general.labels.confirmpassword")}
            name="password-confirm"
            dependencies={["password"]}
            rules={[
              {
                required: true,
                //message: t("general.validation.required"),
              },
              ({ getFieldValue }) => ({
                validator(rule, value) {
                  if (!value || getFieldValue("password") === value) {
                    return Promise.resolve();
                  }
                  return Promise.reject(
                    t("general.labels.passwordsdonotmatch")
                  );
                },
              }),
            ]}
          >
            <Input
              prefix={<LockOutlined />}
              type="password"
              placeholder={t("general.labels.password")}
            />
          </Form.Item>
        </LayoutFormRow>
        <Button type="primary" key="submit" htmlType="submit">
          {t("user.actions.changepassword")}
        </Button>
      </Form>
    </div>
  );
});
