import React from "react";
import * as Yup from "yup";
import { Form, Formik } from "formik";
import { InputCompOne } from "../shared";

// 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")
});

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

type Props = {
    handleNextStep:()=>any
}

const BVN = ({handleNextStep}:Props) => {

  const firstInputRef = React.useRef<HTMLInputElement>(null);

  const handleSubmit = (values:any) => {
    console.log('values', values)
    handleNextStep()
  };

  return (
    <Formik
    initialValues={initialValues}
    validationSchema={validationSchema}
    onSubmit={handleSubmit}
    >
    {(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]">
              <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}
                ref={firstInputRef}
                maxLength={11}
                error={(props.errors.bvn && props.touched.bvn) && props.errors.bvn}
              />
              <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"
              >
                Enter
              </button>
              <p className="text-[#5C2684] mt-[1.5625rem] max-w-[31.625rem]">
                ***Every personal information attached to your BVN is safe and secured. It is only inportant for us to verify your information and also give you access to your application profile/account
              </p>
            </div>
          </div>
        </div>
      </Form>
    )}
    </Formik>
  );
};

export default BVN;