import React, { useState, useContext, useEffect } from "react";

import {
 IonContent,
 IonPage,
 IonCard,
 IonCardContent,
 IonItem,

 IonButton,
 IonCardTitle,
 IonRouterLink,
 IonHeader,
 IonToolbar,
 IonTitle,
 IonButtons,
 IonBackButton,
 IonLoading,
 useIonRouter,
 IonCardSubtitle,
} from "@ionic/react";
import {
 personOutline,
 lockClosedOutline,
 arrowBackOutline,
 alertCircle,
 checkmarkCircle,
} from "ionicons/icons";

import "./Login.css";
//import logo from "/assets/logo/vinpace.png";
import { Context } from "../context/contex";

const Recover: React.FC = () => {
 const [identity, setIdentity] = useState("");

 const context = useContext(Context);
 const router = useIonRouter();

 if (!context) {
  return <div>Loading...</div>;
 }

 const { busy, storage, presentToast, apiRequest, abr } = context;



 const getResetCode = async () => {
  if (!identity) {
   presentToast(
    "top",
    "Please fill all required fields.",
    () => null,
    "danger",
    alertCircle
   );
   return;
  }
   const data = await apiRequest(
  "POST",
  "", //url
  {
 action: "get_pass_reset_code",
     identifier: identity,   
  },
  false,       // require auth
  true      // show success or error messages
) as any;

  if (!data?.success) {
   
   // return;
     console.error("Error:", data);
   } else {

    await storage?.set(abr+"_email_address", data.email);

    setTimeout(() => {
     router.push("/verify-pass-reset-code", "forward", "replace");
    }, 1000);
   }

 };

 return (
  <IonPage>
   <IonHeader>
    <IonToolbar className="nobg ion-padding-horizontal">
     <IonButtons slot="start">
      <IonBackButton
       text=""
       icon={arrowBackOutline}
       defaultHref="/"
      ></IonBackButton>
     </IonButtons>
     <IonTitle>Recover Password</IonTitle>
     <IonRouterLink slot="end" routerLink="/register">
      REGISTER
     </IonRouterLink>
    </IonToolbar>
   </IonHeader>
   <IonContent fullscreen className="ion-content-bg">
      <IonLoading
             isOpen={busy}
             message="Please wait..."
             spinner="circles"
             className="custom-loading"
            />
    <div className="ion-text-center">
      <img className="paynaire-logo" />

    </div>
    <div className="blue-background">
     <IonCard className="login-card">
      <IonCardTitle className="card-title ion-text-capitalize">
       Trouble logging in?
      </IonCardTitle>
      <IonCardSubtitle className="ion-text-center">
       Please enter your email address or phone and we will send you a
       verification code to reset your password.
      </IonCardSubtitle>

      <IonCardContent className="nobg">
       <IonItem lines="none" className="nobg">
        <input
         type="text"
         max={50}
         placeholder="Email or Phone number"
         className="custom-input"
         // value={identity}
         onInput={(e) => setIdentity(e.currentTarget.value || "")}
        />
       </IonItem>

       <IonButton
        expand="block"
        className="custom-login-btn"
        onClick={getResetCode}
       >
        Continue
       </IonButton>
       <div className="create-account">
        <p>
         Remembered your password?{" "}
         <IonRouterLink routerLink="/login">LOGIN NOW</IonRouterLink>
        </p>
       </div>
      </IonCardContent>
     </IonCard>
    </div>
   </IonContent>
  </IonPage>
 );
};

export default Recover;