digifi-www/src/components/GetStarted/BasicInfo.tsx

import React, { useRef, useState } from "react";
import InputCompOne from "../shared/InputCompOne";

interface Option {
  value: string;
  label: string;
}

const BasicInfo: React.FC = () => {
  const [hideOTPComponent, setHideOTPComponent] = useState<boolean>(true);
  const [inputValues, setInputValues] = useState({
    title: "",
    marital: "",
    agentId: "",
    bvn: "",
    firstName: "",
    phone: "",
    email: "",
    surname: "",
    dob: "",
    secondName: "",
  });
  const inputRef = useRef<HTMLInputElement>(null);

  // Array for marital status options
  const maritalStatusOptions: Option[] = [
    { value: "", label: "Select" },
    { value: "single", label: "Single" },
    { value: "married", label: "Married" },
    { value: "divorced", label: "Divorced" },
    { value: "widowed", label: "Widowed" },
  ];

  // Array for title options
  const titleOptions: Option[] = [
    { value: "", label: "Select" },
    { value: "ms", label: "Ms" },
    { value: "mr", label: "Mr" },
    { value: "miss", label: "Miss" },
    { value: "mrs", label: "Mrs" },
  ];

  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    const { name, value } = e.target;

    setInputValues((prev) => ({ ...prev, [name]: value }));
  };

  const handleInput = (e: React.FormEvent<HTMLInputElement>) => {
    const { name, value } = e.currentTarget;

    if (name === "bvn") {
      const regex = /^[0-9]+$/;

      if (regex.test(value)) {
        if (value?.length === 10) {
          setHideOTPComponent(false);
          // secondInputRef.current?.focus();
        } else setHideOTPComponent(true);
      } else {
        console.log("object not found");
      }
    }
  };

  return (
    <>
      <div className="mt-8 max-w-[31.5rem]">
        <div className="flex flex-col gap-3">
          <InputCompOne
            label="Title"
            name="title"
            parentInputClass="max-w-[224px] w-full"
            labelClass="font-bold text-[18px] leading-[21.78px] tracking-[2%] text-[#5C2684] mb-[2px]"
            select
            selectClass="w-full h-[36px] rounded-[6px]"
            selectOptions={titleOptions}
            value={inputValues.title}
            onChange={handleChange}
            ref={inputRef}
          />
          <InputCompOne
            label="Marital Status"
            name="marital"
            parentInputClass="max-w-[224px] w-full"
            labelClass="font-bold text-[18px] leading-[21.78px] tracking-[2%] text-[#5C2684] mb-[2px]"
            select
            selectClass="w-full h-[36px] rounded-[6px]"
            selectOptions={maritalStatusOptions}
            value={inputValues.marital}
            onChange={handleChange}
            onInput={handleInput}
            ref={inputRef}
          />
          <InputCompOne
            label="Direct Sales Agent ID"
            name="agentId"
            parentInputClass="max-w-[224px] w-full"
            labelClass="font-bold text-[18px] leading-[21.78px] tracking-[2%] text-[#5C2684] mb-[2px]"
            select
            selectClass="w-full h-[36px] rounded-[6px]"
            selectOptions={[{ value: "", label: "Select" }]}
            value={inputValues.agentId}
            onChange={handleChange}
            onInput={handleInput}
            ref={inputRef}
          />
          <InputCompOne
            label="BVN"
            name="bvn"
            parentInputClass=" w-full"
            labelSpan="( To get your BVN, dial *565*0# )"
            labelSpanClass="text-[11px] text-[#7a7373]"
            placeholder="Enter your BVN"
            labelClass="font-bold text-[18px] leading-[21.78px] tracking-[2%] text-[#5C2684] mb-[2px] gap-[2px]"
            input
            inputClass="w-full h-[36px] bg-[#EFEFEF] px-[2px] rounded-[6px]"
            value={inputValues.bvn}
            onChange={handleChange}
            onInput={handleInput}
            ref={inputRef}
            maxLength={10}
          />
        </div>
      </div>
      {!hideOTPComponent ? (
        <div className="flex flex-col gap-5">
          <div className="flex justify-between items-center g4">
            <div className="mt-8 max-w-[31.5rem] w-full">
              <div className="flex flex-col gap-3">
                <InputCompOne
                  label="First Name"
                  name="firstName"
                  parentInputClass="w-full"
                  labelClass="font-bold text-[18px] leading-[21.78px] tracking-[2%] text-[#5C2684] mb-[2px]"
                  input
                  inputClass="w-full h-[36px] bg-[#EFEFEF] px-[2px] rounded-[6px]"
                  value={inputValues.firstName}
                  onChange={handleChange}
                  onInput={handleInput}
                  ref={inputRef}
                />
                <InputCompOne
                  label="Phone Number"
                  name="phone"
                  parentInputClass="w-full"
                  labelClass="font-bold text-[18px] leading-[21.78px] tracking-[2%] text-[#5C2684] mb-[2px]"
                  input
                  inputClass="w-full h-[36px] bg-[#EFEFEF] px-[2px] rounded-[6px]"
                  value={inputValues.phone}
                  onChange={handleChange}
                  onInput={handleInput}
                  ref={inputRef}
                />
                <InputCompOne
                  label="Email Address"
                  name="email"
                  parentInputClass="w-full"
                  labelClass="font-bold text-[18px] leading-[21.78px] tracking-[2%] text-[#5C2684] mb-[2px]"
                  input
                  inputClass="w-full h-[36px] bg-[#EFEFEF] px-[2px] rounded-[6px]"
                  value={inputValues.email}
                  onChange={handleChange}
                  onInput={handleInput}
                  ref={inputRef}
                />
              </div>
            </div>
            <div className="mt-8 max-w-[31.5rem] w-full">
              <div className="flex flex-col gap-3">
                <InputCompOne
                  label="Surname"
                  name="surname"
                  parentInputClass="w-full"
                  labelClass="font-bold text-[18px] leading-[21.78px] tracking-[2%] text-[#5C2684] mb-[2px]"
                  input
                  inputClass="w-full h-[36px] bg-[#EFEFEF] px-[2px] rounded-[6px] px-3"
                  value={inputValues.surname}
                  onChange={handleChange}
                  onInput={handleInput}
                  ref={inputRef}
                />
                <InputCompOne
                  label="Date of Birth"
                  name="dob"
                  parentInputClass="w-full"
                  labelClass="font-bold text-[18px] leading-[21.78px] tracking-[2%] text-[#5C2684] mb-[2px]"
                  input
                  inputClass="w-full h-[36px] bg-[#EFEFEF] px-[2px] rounded-[6px] px-3"
                  value={inputValues.dob}
                  onChange={handleChange}
                  onInput={handleInput}
                  ref={inputRef}
                />
                <InputCompOne
                  label="Second Name"
                  name="secondName"
                  parentInputClass="w-full"
                  labelClass="font-bold text-[18px] leading-[21.78px] tracking-[2%] text-[#5C2684] mb-[2px]"
                  input
                  inputClass="w-full h-[36px] bg-[#EFEFEF] px-[2px] rounded-[6px] px-3"
                  value={inputValues.secondName}
                  onChange={handleChange}
                  onInput={handleInput}
                  ref={inputRef}
                />
              </div>
            </div>
          </div>
          <div className="w-full flex justify-end">
            <button className="w-full max-w-[15.25rem] h-[36px] rounded bg-[#FBB700] rounded-2 px-4 text-[18px] text-[#282828] font-semibold disabled:text-[#282828] disabled:text-opacity-50">
              Enter
            </button>
          </div>
        </div>
      ) : null}
    </>
  );
};

export default BasicInfo;