"use client";
import {
  FormButton,
  FormInput,
  FormCheckBox,
  FormMobileNuber,
} from "@/app/components/form/forms";
import InputPassword from "@/app/components/form/inputpassword";
import AuthBanner from "@/app/components/banner/authbanner";
import OnboardingTabs from "@/app/components/onboarding-tabs";
import { useRouter } from "next/navigation";
import { useState, useEffect } from "react";
import MobileNumber from "../components/form/country/MobileNumber";
export default function Onboarding() {
  const router = useRouter();
  const [fullName, setFullName] = useState("");
  const [password, setPassword] = useState("");
  const [mobile, setMobile] = useState("");
  const [sameWhatsAppNumber, setSameWhatsAppNumber] = useState(false); 
  const [promotionalEmailAgreed, setPromotionalEmailAgreed] = useState(true); 

  const handleSubmit = async (e: any) => {
    e.preventDefault();

    const payLoadData={
        fullName,
        password,
        mobile:localStorage.getItem('mob'),
        sameWhatsAppNumber,
        promotionalEmailAgreed,
        dial_code:localStorage.getItem('dial_code'),
        country_flag:localStorage.getItem('country_flag'),
    };

    console.log("Form submitted:",payLoadData);

  
    try {
      const response = await fetch('/api/onboarding/step1', {
        method: "POST",
        headers: {
          "Content-Type": "application/json",
        },
        body: JSON.stringify(payLoadData),
      });

      const data = await response.json();
      if (response.ok) {
        localStorage.setItem("otp", data.data.otp);

        router.push("/onboarding/step2");
      } else {
        if (data.success == false) {
          console.log(data.message);
        }
      }
    } catch (err) {
      console.log("Something went wrong. Please try again.");
    }
  };

  return (
    <div className="grid grid-cols-1 sm:grid-cols-2 sm:gap-4">
    <AuthBanner />
    <div className="flex flex-1 flex-col pb-15 md:mt-8">
      <div className="mx-auto mt-8 w-[90%]">
      <div className="flex flex-1 grow gap-2">
          <OnboardingTabs
            id="ot_account_setup"
            title="Account setup"
            subtitle="Step 1"
            status="current"
          />
          <OnboardingTabs
            id="ot_personal_info"
            title="Personal info"
            subtitle="Step 2"
            status="upcoming"
          />
          <OnboardingTabs
            id="ot_interest"
            title="Interest"
            subtitle="Step 3"
            status="upcoming"
          />
        </div>
        <div className="mt-8">
          <h1>Account setup</h1>
          <div className="mt-5">
          <form onSubmit={handleSubmit}>
              <FormInput
                type="text"
                id="full_name"
                label="Full name"
                require={true}
                value={fullName}
                onChange={(e: any) => setFullName(e.target.value)}
              />
              <div className="mt-6">
                <InputPassword
                  id="password_account_setup"
                  label="Set password"
                  require={true}
                  value={password}
                  onChange={(e: any) => setPassword(e.target.value)}
                  name={undefined}
                />
              </div>
              
              <div className="mt-8">
                {/* <FormCheckBox
                  id="check_whatsapp"
                  label={
                    <>
                      My same number on WhatsApp.
                      <br />I agree to receive messages.
                    </>
                  }
                  value={sameWhatsAppNumber.toString()}
                  onChange={() => setSameWhatsAppNumber(!sameWhatsAppNumber)}
                /> */}
                <FormCheckBox
                  id="check_agree_sms"
                  label={
                    <>
                      I agree to receive transactional and
                      <br />
                      promotional messages from Morni.
                    </>
                  }
                  value={promotionalEmailAgreed.toString()}
                  onChange={() =>
                    setPromotionalEmailAgreed(!promotionalEmailAgreed)
                  }
                />
              </div>
              <FormButton
                id="btn_save_account_setup"
                label="Save account setup"
                type="submit"
                color="gray"
                hairline="amber"
                disabled={false}
              />
            </form>
          </div>
        </div>
      </div>
    </div>
  </div>
  );
}