import { Button, Card, Col, 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 (
    <>
      <Col span={24}>
        <Form
          onFinish={handleFinish}
          autoComplete={"no"}
          initialValues={currentUser}
          layout="vertical"
        >
          <Card
            title={t("user.labels.profileinfo")}
            extra={
              <Button type="primary" key="submit" htmlType="submit">
                {t("user.actions.updateprofile")}
              </Button>
            }
          >
            <LayoutFormRow noDivider>
              <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>
          </Card>
        </Form>
      </Col>
      <Col span={24}>
        <Form
          onFinish={handleChangePassword}
          autoComplete={"no"}
          initialValues={currentUser}
          layout="vertical"
        >
          <Card
            title={t("user.labels.changepassword")}
            extra={
              <Button type="primary" key="submit" htmlType="submit">
                {t("user.actions.changepassword")}
              </Button>
            }
          >
            <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>
          </Card>
        </Form>
      </Col>
    </>
  );
});