import React, { useState, useContext, useEffect } from "react";
import {
 IonContent,
 IonPage,
 IonCard,
 IonCardContent,
 IonItem,
 IonIcon,
 IonButton,
 IonCardTitle,
 IonRouterLink,
 IonHeader,
 IonToolbar,
 IonTitle,
 IonButtons,
 IonBackButton,

 IonLoading,
 useIonRouter,
} from "@ionic/react";
import {

 eyeOutline,
 eyeOffOutline,
 arrowBackOutline,
 alertCircle,
} from "ionicons/icons";
import "./Register.css";
import { Context } from "../context/contex";

const Register: React.FC = () => {
 const [fname, setFname] = useState<string>("");
 const [lname, setLname] = useState<string>("");
 const [email, setEmail] = useState<string>("");
  const [phone, setPhone] = useState<string | null>(null);
 const [password, setPassword] = useState<string>("");
 const [password2, setPassword2] = useState<string>("");
 const [showPassword, setShowPassword] = useState(false);
 const [showPassword2, setShowPassword2] = useState(false);
   const [ref, setRef] = useState<string | null>(null);

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

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

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

 useEffect(() => {
  if (userInfo) {
   router.push("/home", "forward", "replace");
  }
 }, [userInfo, router]);

 const togglePasswordVisibility = (passwordType: string) => {
  if (passwordType === "password1") {
   setShowPassword(!showPassword);
  } else {
   setShowPassword2(!showPassword2);
  }
 };

 const signUp = async () => {
  //If user is already signed up on this device but did not verify email we can just let them verify it.
  const c = await storage?.get(abr+"_email_code");
  const e = await storage?.get(abr+"_email_address");
  if (c !== null && e !== null) {
   presentToast(
    "top",
    `We found an existing account on this device. Please check ${e} and enter the verification code we sent to that email to continue.`,
    () => null,
    "warning",
    alertCircle
   );
   setBusy(false);

   // console.log("Fetched data:", data);
   setTimeout(() => {
    router.push("/verify-email", "forward", "replace");
   }, 900);
  }
  if (
   fname.trim() === "" ||
   lname.trim() === "" ||
   email.trim() === "" ||
   password.trim() === "" ||
   password2.trim() === ""
  ) {
   presentToast(
    "top",
    "Please fill all required fields.",
    () => null,
    "danger",
    alertCircle
   );
   return;
  }
  if (phone && phone.length < 11) {
   presentToast(
    "top",
    "Phone number cannot be less than 11 digits.",
    () => null,
    "danger",
    alertCircle
   );
   return;
  }
  try {
   setBusy(true);
  type SignupParams = {
  action: string;
  first_name: string;
  last_name: string;
  email: string;
  phone?: string;
  pass: string;
  pass2: string;
  ref_by?: string;
};

const params: SignupParams = {
  action: "user_signup",
  first_name: fname,
  last_name: lname,
  email: email,
  pass: password,
  pass2: password2,
};
if (phone && phone.trim() !== "") {
  params.phone = phone;
}
if (ref && ref.trim() !== "") {
  params.ref_by = ref;
}

       const data = await apiRequest(
  "POST",
  "", //url
params,
  false,       // require auth
  true      // show success or error messages
) as any;
 


   if (!data.success) {
    // console.error("Error:", data.error);
   } else {
    // await storage?.set("vin_auth_token", data.token);
    await storage?.set(abr+"_email_code", data.code);
    await storage?.set(abr+"_email_address", data.email);
  
    setBusy(false);

    // console.log("Fetched data:", data);
    setTimeout(() => {
     router.push("/verify-email", "forward", "replace");
    }, 2000);
   }
  } catch (error: any) {
   setBusy(false);

   console.error("Error:", error);
  }
 };

 return (
   <IonPage>
   <IonHeader>
    <IonToolbar className="nobg ion-padding-horizontal">
     <IonButtons slot="start">
      <IonBackButton
       text=""
       icon={arrowBackOutline}
       defaultHref="/"
      ></IonBackButton>
     </IonButtons>
     <IonTitle>Sign up</IonTitle>
     <IonRouterLink slot="end" routerLink="/login">
      LOGIN
     </IonRouterLink>
    </IonToolbar>
   </IonHeader>
   <IonContent fullscreen className="ion-content-bg">
    <IonLoading
     isOpen={busy}
     message="Please wait..."
     spinner="circles"
     className="custom-loading"
     // onDidDismiss={() => setShowLoading(false)}
    />
    <IonCard className="login-card-reg">
     <IonCardTitle className="card-title">Create your Account</IonCardTitle>

     <IonCardContent className="nobg">
      <IonItem lines="none" className="nobg">
       <input
        placeholder="First Name"
        type="text"
        className="custom-input-reg ion-padding"
        onInput={(e) => setFname(e.currentTarget.value || "")}
        value={fname}
       />
      </IonItem>
      <IonItem lines="none" className="nobg">
       <input
        placeholder="Last Name"
        type="text"
        className="custom-input-reg ion-padding"
        onInput={(e) => setLname(e.currentTarget.value || "")}
        value={lname}
       />
      </IonItem>
      <IonItem lines="none" className="nobg">
       <input
        placeholder="E-mail"
        type="email"
        className="custom-input-reg ion-padding"
        onInput={(e) => setEmail(e.currentTarget.value || "")}
        value={email}
       />
      </IonItem>
        <IonItem lines="none" className="nobg">
         <div className="create-accounta">
       <p>
       Providing a phone number is completely optional.
       </p>
      </div>
      </IonItem>
      <IonItem lines="none" className="nobg">
       <input
        placeholder="Phone Number (optional)"
        type="tel"
        className="custom-input-reg ion-padding"
        onInput={(e) => setPhone(e.currentTarget.value || "")}
        value={phone!}
       />
       </IonItem>
     
      <IonItem lines="none" className="nobg">
       <input
        placeholder="Password"
        type={showPassword ? "text" : "password"}
        className="custom-input-reg pass ion-padding"
        onInput={(e) => setPassword(e.currentTarget.value || "")}
        value={password}
       />
       <IonIcon
        icon={showPassword ? eyeOffOutline : eyeOutline}
        className="eye-icon"
        onClick={() => togglePasswordVisibility("password1")}
       />
      </IonItem>
      <IonItem lines="none" className="nobg">
       <input
        placeholder="Confirm Password"
        type={showPassword2 ? "text" : "password"}
        className="custom-input-reg pass ion-padding"
        onInput={(e) => setPassword2(e.currentTarget.value || "")}
        value={password2}
       />
       <IonIcon
        icon={showPassword2 ? eyeOffOutline : eyeOutline}
        className="eye-icon"
        onClick={() => togglePasswordVisibility("password2")}
       />
      </IonItem>
       <IonItem lines="none" className="nobg">
       <input
        placeholder="Referrer's code (optional)"
        type="text"
        className="custom-input-reg ion-padding"
       onInput={(e) => setRef(e.currentTarget.value || '')}
        value={ref!}
       />
      </IonItem>
      <div className="create-account">
       <p>
        By creating an account you confirm that you have read and accepted our{" "}
        <a href="https://swapeki.com/terms-and-conditions/">Terms of Service</a>
       </p>
      </div>
      <IonButton onClick={signUp} expand="block" className="custom-login-btn">
       Create Account
      </IonButton>
      <p>&nbsp;</p>
     </IonCardContent>
    </IonCard>
   </IonContent>
  </IonPage>
 );
};

export default Register;