import { Button, Form, Input, Result, Typography } from "antd";
import { useTranslation } from "react-i18next";
import { connect } from "react-redux";
import { createStructuredSelector } from "reselect";
import ImEXOnlineLogo from "../../assets/logo192.png";
import { sendPasswordReset, sendPasswordResetAgain } from "../../redux/user/user.actions";
import { selectPasswordReset } from "../../redux/user/user.selectors";
import AlertComponent from "../alert/alert.component";
import "./user-request-pw-reset.styles.scss";
import InstanceRenderManager from "../../utils/instanceRenderMgr";

const mapStateToProps = createStructuredSelector({
  passwordReset: selectPasswordReset
});
const mapDispatchToProps = (dispatch) => ({
  sendPasswordReset: (email) => dispatch(sendPasswordReset(email)),
  sendPasswordResetAgain: (email) => dispatch(sendPasswordResetAgain(email))
});

export function UserRequestResetPw({ passwordReset, sendPasswordReset, sendPasswordResetAgain }) {
  const handleFinish = (values) => {
    try {
      sendPasswordReset(values.email);
    } catch (error) {
      console.log(error);
    }
  };

  const { t } = useTranslation();
  if (passwordReset.success)
    return (
      <Result
        status="success"
        title={t("general.labels.passwordresetsuccess")}
        subTitle={t("general.labels.passwordresetsuccess_sub")}
        extra={[
          <Button
            key="send-again"
            onClick={() => sendPasswordResetAgain(passwordReset.email)}
            loading={passwordReset.loading}
          >
            {t("general.labels.sendagain")}
          </Button>
        ]}
      />
    );

  return (
    <div className="login-container">
      <div className="login-logo-container">
        <img
          src={InstanceRenderManager({ imex: ImEXOnlineLogo, rome: null })}
          height="100"
          width="100"
          alt={InstanceRenderManager({
            imex: t("titles.imexonline"),
            rome: t("titles.romeonline")
          })}
        />
        <Typography.Title>
          {InstanceRenderManager({
            imex: t("titles.imexonline"),
            rome: t("titles.romeonline")
          })}
        </Typography.Title>
      </div>
      <Typography.Title level={3}>{t("titles.resetpassword")}</Typography.Title>

      <Form layout="vertical" size="large" onFinish={handleFinish}>
        <Form.Item
          label={t("general.labels.email")}
          name="email"
          rules={[
            {
              type: "email",
              required: true
              //message: t("general.validation.required"),
            }
          ]}
        >
          <Input />
        </Form.Item>
        {passwordReset.error ? <AlertComponent title={passwordReset.error} type="warning" /> : null}
        <Button className="login-btn" type="primary" htmlType="submit" loading={passwordReset.loading}>
          {t("general.actions.submit")}
        </Button>
      </Form>
    </div>
  );
}

export default connect(mapStateToProps, mapDispatchToProps)(UserRequestResetPw);
