import LayoutWithNav from "@/components/layout/LayoutWithNav";
import StandardContainer from "@/components/layout/StandardContainer";
import { Col, Row } from "antd";
import { issueVerificationEmail } from "apiCalls/apiEndpoints";
import { useUser } from "context/UserContext";
import { useEffect } from "react";
import { useMutation } from "react-query";
import { Button, notification } from "antd";
import { usePath } from "context/HistoryContext";

function VerificationActions() {
  const { user } = useUser();
  const {setPath} = usePath();

  const verifyMn = useMutation(issueVerificationEmail, {
    onSuccess: (data) => {
      notification.success({
        message: "Verification Email Success",
        description: "We have sent you a verification email, check your inbox",
        onClick: () => {
          console.log("Notification Clicked!");
        },
      });
    },
    onError: (err: any) => {
      notification.error({
        message: "Email Verification Failed",
        description: err?.message,
        onClick: () => {
          console.log("Notification Clicked!");
        },
      });
    },
    
  });

  const openNotification = () => {
    notification.open({
      message: "Authentication Note",
      description: "please login first",
      onClick: () => {
        console.log("Notification Clicked!");
      },
    });
  };

  useEffect(() => {
    if(user){
      verifyMn.mutate();
    }else {
      setPath("verification-actions");
      router.push('/login')
      openNotification()
    }
  }, []);

  return (
    <LayoutWithNav>
      <StandardContainer>
        <Row>
          <Col span={24}>
            {/* <div className="w-16 h-16">
              <ImageWithFallback
                layout={"fixed"}
                src={verifyImg}
                alt="verification-email"
              />
            </div> */}
            <h5>Verify your account</h5>
            <p className="text-gray-600">
              We have sent your email verification details to your email (
              {user?.email}). Click on the link attached to the email to verify
              your account.
            </p>

            <p className="mt-3">
              Didnt recieve any email? click the button below.
            </p>
            <Button
              className="mt-2"
              loading={verifyMn.isLoading}
              disabled={verifyMn.isLoading}
              type="primary"
              onClick={() => verifyMn.mutate()}
            >
              Get verification email
            </Button>
          </Col>
        </Row>
      </StandardContainer>
    </LayoutWithNav>
  );
}

export default VerificationActions;