import { Button, Card, Col, Form, Input } from "antd";
import { LockOutlined } from "@ant-design/icons";
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";
import { useNotification } from "../../contexts/Notifications/notificationContext.jsx";
import { useSocket } from "../../contexts/SocketIO/useSocket.js";
import NotificationSettingsForm from "../notification-settings/notification-settings-form.component.jsx";

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 notification = useNotification();
  const { scenarioNotificationsOn } = useSocket();

  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>
      {scenarioNotificationsOn && (
        <Col span={24}>
          <NotificationSettingsForm />
        </Col>
      )}
    </>
  );
});