import React from "react";
import * as Yup from "yup";
import { Form, Formik } from "formik";
import { InputCompOne } from "..";
import {useNavigate} from 'react-router-dom'
import { RouteHandler } from "../../router/routes";

import { useDispatch } from "react-redux";
import { updateUserDetails } from "../../store/UserDetails";

import { validateBVN, verifyOTP } from "../../core/apiRequest";
import { RequestStatus } from "../../core/models";

// To get the validation schema
const validationSchema = Yup.object().shape({
  bvn: Yup.string()
  .required("BVN is required")
  .test("no-e", "Invalid number", (value:any) => {
    if (value && /^[0-9]*$/.test(value) == false) {
      return false;
    }
    return true;
  })
  .min(11, "must be 11 digits")
  .max(11, "must be 11 digits"),
  otp: Yup.string()
  // .when('require_otp', {
  //   is: true,
  //   then: Yup.string().required("OTP is required")
  // })
  // .required("OTP is required")
  .test("no-e", "Invalid number", (value:any) => {
    if (value && /^[0-9]*$/.test(value) == false) {
      return false;
    }
    return true;
  })
  .min(5, "must be 5 digits")
  .max(5, "must be 5 digits"),
  // .test("no-e", "must be 11 characters", (value:any) => {
  //   if (value.length < 11) {
  //     return false;
  //   }
  //   return true;
  // })
});

// initial values for formik
let initialValues = {
  bvn: '',
  otp: '',
};

type ValidBVN = {
  verification_id:string
  valid: undefined | boolean
}

const LetsGetStarted: React.FC = () => {
  const dispatch = useDispatch()
  const navigate = useNavigate()
  // const [pinValues, setPinValues] = React.useState({
  //   bvn: "",
  //   otp: "",
  // });
  // const otpInputRef = React.useRef<HTMLInputElement>(null);

  const [requestStatusBVN, setRequestStatusBVN] = React.useState<RequestStatus>({loading:false, status:undefined, message:''});

  const [requestStatusOTP, setRequestStatusOTP] = React.useState<RequestStatus>({loading:false, status:undefined, message:''});

  const [bvnIsValid, setBvnIsValid] = React.useState<ValidBVN>({
    verification_id: '',
    valid: undefined
  });


  // e: React.FormEvent<HTMLInputElement>
  // let { value } = e.target as HTMLInputElement;
  const bvnValidation = (values:any) => {   // Function to Validate BVN
    let bvn = values.bvn
    setRequestStatusBVN({loading:true, status:false, message:''})
    validateBVN({bvn}).then(res => {
      if(!res || !res.data.call_return){
        setBvnIsValid({verification_id:'', valid: false})
        setRequestStatusBVN({loading:false, status:false, message:'unable to verify BVN'})
        return setTimeout(()=>{
          setRequestStatusBVN({loading:false, status:false, message:''})
        }, 4000)
      }
      setBvnIsValid({verification_id:res.data.verification_id, valid: true})
      setRequestStatusBVN({loading:false, status:true, message:'verified'})
    }).catch(err => {
      setBvnIsValid({verification_id:'', valid: false})
      console.log(err)
    })
  };

  const handleSubmit = (values:any) => {  // Function to VERIFY OTP AND LOGIN USER
    setRequestStatusOTP({loading:true, status:false, message:''})
    // console.log('values', values)
    verifyOTP({...values, verification_id:bvnIsValid.verification_id}).then(res=>{
      if(!res || !res.data.call_return){
        setRequestStatusOTP({loading:false, status:false, message:'wrong otp'})
        return setTimeout(()=>{
          setRequestStatusOTP({loading:false, status:false, message:''})
        },4000)
      }
      // console.log(res.data)
      localStorage.setItem('token', res.data?.token)
      localStorage.setItem('uid', res?.data?.customer[0]?.uid)
      dispatch(updateUserDetails({ ...res?.data?.customer[0] }));
      navigate(RouteHandler.dashboardHome, {replace:true})
    }).catch(err => {
      setRequestStatusOTP({loading:false, status:false, message:'something went wrong, try again'})
      console.log(err)
      return setTimeout(()=>{
        setRequestStatusOTP({loading:false, status:false, message:''})
      },4000)
    })
  };

  return (
    <Formik
    initialValues={initialValues}
    validationSchema={validationSchema}
    onSubmit={bvnIsValid.valid ? handleSubmit : bvnValidation}
    >
    {(props:any) => (
      <Form className="">
        <div className="w-full">
          <div className="containerMode flex justify-between gap-1 xl:gap-8 flex-col">
            <div className="my-[4rem] flex items-center justify-center w-full">
              <h1 className="font-bold text-[2.375rem] text-[#5C2684] my-[.5rem] text-center">
                Let’s Get You Started
              </h1>
            </div>
            <div className="mx-auto flex flex-col gap-8 max-w-[31.625rem] ">
              <div className='w-full'>
                <InputCompOne
                  parentClass="flex flex-col gap-2"
                  label="Enter Your BVN "
                  name="bvn"
                  parentInputClass="w-full"
                  labelSpan="( To get your BVN, dial *565*0# )"
                  labelSpanClass="text-[13px] text-[#5a5a5a] font-semibold"
                  placeholder="Enter your BVN"
                  labelClass="font-bold text-[18px] leading-[21.78px] tracking-[2%] text-[#282828] mb-[2px] flex item-center gap-[4px]"
                  input
                  inputClass="w-full h-[3.625rem] rounded bg-[#EFEFEF] px-4"
                  value={props.values.bvn}
                  onChange={props.handleChange}
                  error={(props.errors.bvn && props.touched.bvn) && props.errors.bvn}
                />
                <p className={`p-2 ${!requestStatusBVN.status ? 'text-red-500' : 'text-emerald-500'}`}>{requestStatusBVN.loading ? 'verifying...' : requestStatusBVN.message}</p>
              </div>
              {bvnIsValid.valid && (
                <InputCompOne
                  parentClass="flex flex-col gap-2"
                  label="Enter OTP "
                  name="otp"
                  parentInputClass="w-full"
                  labelSpan="( Please check your BVN phone number for verification pin )"
                  labelSpanClass="text-[13px] text-[#5a5a5a] font-semibold"
                  placeholder="Enter your OTP"
                  labelClass="font-bold text-[18px] leading-[21.78px] tracking-[2%] text-[#282828] mb-[2px] flex item-center gap-[4px]"
                  input
                  inputClass="w-full h-[3.625rem] rounded bg-[#EFEFEF] px-4"
                  value={props.values.otp}
                  onChange={props.handleChange}
                  error={(props.errors.otp && props.touched.otp) && props.errors.otp}
                />
              )}
              <button
                type='submit'
                className="w-full h-[3.625rem] rounded bg-[#FBB700] rounded-2 px-4 text-[18px] text-[#282828] font-semibold disabled:text-[#282828] disabled:text-opacity-50"
                disabled={requestStatusBVN.loading || (!props.values.otp && bvnIsValid.valid)}
              >
                Enter
              </button>
              
              <p className={`p-2 ${!requestStatusOTP.status ? 'text-red-500' : 'text-emerald-500'}`}>{requestStatusOTP.message}</p>

              {bvnIsValid.valid || bvnIsValid.valid == undefined ? (
                <p className="text-[#5C2684] mt-[1.5625rem] w-fit">
                  ***Every personal information attached to your BVN is safe and
                  secure. It is only important for us to verify your information and
                  also give you access to your application profile/account.
                </p>
              ) : (
                <p className="text-[#5C2684] mt-[1.5625rem] w-fit">
                  ***Did not receive OTP? Click to resend
                </p>
              )}
            </div>
          </div>
        </div>
      </Form>
    )}
    </Formik>
  );
};

export default LetsGetStarted;