import React, { useRef, useState } from "react";
import InputDetails from "./IntroDetails";
import OTPSection from "./OtpSection";
import SpouseDetails from "./SpouseDetails";
import { Button } from "..";

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

interface BasicInfoProps {
  inputValues: {
    title: string;
    marital: string;
    agentId: string;
    bvn: string;
    firstName: string;
    phone: string;
    email: string;
    surname: string;
    dob: string;
    secondName: string;
    spouseBVN: string;
  };
  setInputValues: React.Dispatch<React.SetStateAction<any>>;
  handleNextStep: any;
}

const BasicInfo: React.FC<BasicInfoProps> = ({
  inputValues,
  setInputValues,
  handleNextStep,
}) => {
  const [hideOTPComponent, setHideOTPComponent] = useState<boolean>(true);
  const inputRef = useRef<HTMLInputElement>(null);

  const handleChange = (e: React.FormEvent<HTMLInputElement>) => {
    const { name, value } = e.target as HTMLInputElement;
    setInputValues((prev: typeof inputValues) => ({ ...prev, [name]: value }));
  };

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

    if (name === "bvn") {
      const isNumeric = /^[0-9]+$/.test(value);

      if (isNumeric) {
        if (value.length === 10) {
          setHideOTPComponent(false);
        } else {
          setHideOTPComponent(true);
        }
      } else {
        console.log("Invalid BVN");
      }
    }
  };

  return (
    <>
      {/* Header */}
      <h1 className="font-semibold text-[2.375rem] text-[#5C2684] my-[.5rem]">
        Let’s Get You Started
      </h1>
      <form>
        <InputDetails
          inputValues={inputValues}
          handleChange={handleChange}
          handleInput={handleInput}
          inputRef={inputRef}
        />
        {!hideOTPComponent && (
          <>
            <OTPSection
              inputValues={inputValues}
              handleChange={handleChange}
              handleInput={handleInput}
              inputRef={inputRef}
            />
            <SpouseDetails
              inputValues={inputValues}
              handleChange={handleChange}
              handleInput={handleInput}
              inputRef={inputRef}
            />
            <Button
              className="mt-8 btn-R bg-[#5A2C82]"
              text="Enter"
              type="button"
              onClick={handleNextStep}
            />
          </>
        )}
      </form>
    </>
  );
};

export default BasicInfo;