import axios from "axios";
import Head from "next/head";
import React, { useEffect } from "react";
import style from "./email.module.css";
import { Cancel, CheckCircleRounded } from "@mui/icons-material";
import { useRouter } from "next/router";
import { authApi } from "../../api/api";
import { accountStoreActions } from "@/store/account";
import { useDispatch } from "react-redux";
const SuccessPage = ({ data }) => {
  const router = useRouter();
  const dispatch = useDispatch();
  return (
    <React.Fragment>
      <Head>
        <title>Email Confirmation - Oom.ae</title>
      </Head>
      {data.status === true &&
        (data.type === "reseller" ? (
          <div className={style.section}>
            <div className={style.icon}>
              <CheckCircleRounded />
            </div>
            <p className={style.order_success_text}>
              Email Successfully Verified
            </p>
            <p>
              You will be recieving an email once the administrator verify your
              seller account.
            </p>
            <button
              type="button"
              className="secondary-btn"
              onClick={() => router.push("/")}
            >
              Home
            </button>
          </div>
        ) : (
          <div className={style.section}>
            <div className={style.icon}>
              <CheckCircleRounded />
            </div>
            <p className={style.order_success_text}>
              Email Successfully Verified
            </p>
            <button
              type="button"
              className="secondary-btn"
              onClick={() => dispatch(accountStoreActions.openSignInUI())}
            >
              Login Now
            </button>
          </div>
        ))}
      {data.status === false && (
        <div className={style.section}>
          <div className={style.icon_failed}>
            <Cancel />
          </div>
          <p className={style.order_success_text}>
            Email Verfication Link Expired!!!
          </p>
        </div>
      )}
    </React.Fragment>
  );
};

export default SuccessPage;

export const getServerSideProps = async (ctx) => {
  let status = false;
  if (!ctx.query.userid || !ctx.query.token)
    return {
      redirect: {
        destination: "/",
        permanent: false,
      },
    };
  if (ctx.query.type === "reseller") {
    await authApi
      .post("/reseller/confirm/mail", {
        userid: ctx.query.userid,
        token: ctx.query.token,
      })
      .then((res) => {
        if (res.data.success === true) {
          status = true;
        } else {
          status = false;
        }
      })
      .catch((err) => {
        return {
          redirect: {
            destination: "/",
            permanent: false,
          },
        };
        console.log(err);
      });
  } else
    await authApi
      .post("/customer/confirm/mail", {
        userid: ctx.query.userid,
        token: ctx.query.token,
      })
      .then((res) => {
        if (res.data.success === true) {
          status = true;
        } else {
          status = false;
        }
      })
      .catch((err) => {
        return {
          redirect: {
            destination: "/",
            permanent: false,
          },
        };
        console.log(err);
      });

  return {
    props: {
      data: {
        status: status,
        type: ctx.query.type,
      },
    },
  };
};
