import React from "react";

import { Button, InputCompOne } from "..";

import {Formik, Form} from 'formik'
import * as Yup from "yup";

const initialValues = {
    title: "",
    marital_status: "",
    agent_id: "",
    bvn: "",
    first_name: "",
    phone: "",
    email: "",
    surname: "",
    dob: "",
    second_name: "",
    spouse_bvn: "",
};

// To get the validation schema
const validationSchema = Yup.object().shape({
  title: Yup.string()
    .required("Required"),
  marital_status: Yup.string()
    .required("Required"),
  agent_id: Yup.string()
    .required("Required"),
  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"),
    first_name: Yup.string()
    .required("Required"),
  phone: Yup.string()
    .required("Required"),
  email: Yup.string()
    .required("Required")
    .email("Wrong email format"),
  surname: Yup.string()
    .required("Required"),
  dob: Yup.string()
    .required("Required"),
});

interface BasicInfoProps {
  handleNextStep: any;
}

const BasicInfo: React.FC<BasicInfoProps> = ({
  handleNextStep,
}) => {
  // const inputRef = useRef<HTMLInputElement>(null);

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


  //FUNCTION TO HANDLE SUBMIT
  const handleSubmit = (values:any) => {
    console.log(values)
    handleNextStep()
  };

  return (
    <>
      {/* Header */}
      <h1 className="font-semibold text-[2.375rem] text-[#5C2684] my-[.5rem]">
        Let’s Get You Started
      </h1>
      <Formik
            initialValues={initialValues}
            validationSchema={validationSchema}
            onSubmit={handleSubmit}
          >
            {(props)=>(
              <Form>
                <div className="w-full rounded py-3 bg-[#5C2684] px-5">
                  <p className="text-base text-[#FBB700] tracking-[3%] font-extrabold w-fit">
                    BASIC INFORMATION
                  </p>
                </div>
                <div className="mt-8 grid grid-cols-2">
                  <div className="flex flex-col gap-4 max-w-[15.6875rem]">
                    <InputCompOne
                      parentInputClass="max-w-[224px] w-full"
                      parentClass="max-w-[25.875rem] w-full flex flex-col gap-4"
                      name="title"
                      label="Title"
                      labelClass="font-bold text-[18px] leading-[21.78px] tracking-[2%] text-[#5C2684] mb-[2px]"
                      select={true}
                      selectClass="w-full h-[36px] rounded-[6px]"
                      selectOptions={titleOptions}
                      selectValue={props.values.title}
                      onChange={props.handleChange}
                      error={(props.errors.title && props.touched.title) ? props.errors.title : ''}
                    />
                    <InputCompOne
                      parentInputClass="max-w-[224px] w-full"
                      parentClass="max-w-[25.875rem] w-full flex flex-col gap-4"
                      name="marital_status"
                      label="Marital Status"
                      labelClass="font-bold text-[18px] leading-[21.78px] tracking-[2%] text-[#5C2684] mb-[2px]"
                      select={true}
                      selectClass="w-full h-[36px] rounded-[6px]"
                      selectOptions={maritalStatusOptions}
                      selectValue={props.values.marital_status}
                      onChange={props.handleChange}
                      error={(props.errors.marital_status && props.touched.marital_status) ? props.errors.marital_status : ''}
                    />
                    <InputCompOne
                      parentInputClass="max-w-[224px] w-full"
                      parentClass="max-w-[25.875rem] w-full flex flex-col gap-4"
                      name="agent_id"
                      label="Direct Sales Agent ID"
                      labelClass="font-bold text-[18px] leading-[21.78px] tracking-[2%] text-[#5C2684] mb-[2px]"
                      select={true}
                      selectClass="w-full h-[36px] rounded-[6px]"
                      selectOptions={{loading: false, data:[{ value: "", label: "Select" }, { value: "dd", label: "AB001" }]}}
                      selectValue={props.values.agent_id}
                      onChange={props.handleChange}
                      error={(props.errors.agent_id && props.touched.agent_id) ? props.errors.agent_id : ''}
                    />
                    <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={true}
                        inputClass="w-full h-[36px] bg-[#EFEFEF] rounded-[6px]"
                        value={props.values.bvn}
                        onChange={props.handleChange}
                        error={(props.errors.bvn && props.touched.bvn) ? props.errors.bvn : ''}
                    />
                  </div>
                </div>
                
                <div className="mt-5">
                  <div className="grid grid-cols-2 gap-4">
                    <InputCompOne
                      parentClass="max-w-[20.3125rem]"
                      label="First Name"
                      name="first_name"
                      parentInputClass="w-full"
                      labelClass="font-bold text-[1.125rem] leading-[1.3613rem] tracking-[2%] text-[#5C2684] mb-[.125rem]"
                      input
                      inputClass="w-full h-[2.25rem] bg-[#EFEFEF] rounded-[.375rem]"
                      value={props.values.first_name}
                      onChange={props.handleChange}
                      error={(props.errors.first_name && props.touched.first_name) ? props.errors.first_name : ''}
                    />
                    <InputCompOne
                      parentClass="max-w-[20.3125rem]"
                      label="Phone Number"
                      name="phone"
                      parentInputClass="w-full"
                      labelClass="font-bold text-[1.125rem] leading-[1.3613rem] tracking-[2%] text-[#5C2684] mb-[.125rem]"
                      input
                      inputClass="w-full h-[2.25rem] bg-[#EFEFEF] rounded-[.375rem]"
                      value={props.values.phone}
                      onChange={props.handleChange}
                      error={(props.errors.phone && props.touched.phone) ? props.errors.phone : ''}
                    />
                    <InputCompOne
                      parentClass="max-w-[20.3125rem]"
                      label="Email Address"
                      name="email"
                      parentInputClass="w-full"
                      labelClass="font-bold text-[1.125rem] leading-[1.3613rem] tracking-[2%] text-[#5C2684] mb-[.125rem]"
                      input
                      inputClass="w-full h-[2.25rem] bg-[#EFEFEF] rounded-[.375rem]"
                      value={props.values.email}
                      onChange={props.handleChange}
                      error={(props.errors.email && props.touched.email) ? props.errors.email : ''}
                    />

                    <InputCompOne
                      parentClass="max-w-[20.3125rem]"
                      label="Surname"
                      name="surname"
                      parentInputClass="w-full"
                      labelClass="font-bold text-[1.125rem] leading-[1.3613rem] tracking-[2%] text-[#5C2684] mb-[.125rem]"
                      input
                      inputClass="w-full h-[2.25rem] bg-[#EFEFEF] rounded-[.375rem] px-3"
                      value={props.values.surname}
                      onChange={props.handleChange}
                      error={(props.errors.surname && props.touched.surname) ? props.errors.surname : ''}
                    />
                    <InputCompOne
                      parentClass="max-w-[20.3125rem]"
                      label="Date of Birth"
                      name="dob"
                      parentInputClass="w-full"
                      labelClass="font-bold text-[1.125rem] leading-[1.3613rem] tracking-[2%] text-[#5C2684] mb-[.125rem]"
                      input
                      inputType='date'
                      inputClass="w-full h-[2.25rem] bg-[#EFEFEF] rounded-[.375rem] px-3"
                      value={props.values.dob}
                      onChange={props.handleChange}
                      error={(props.errors.dob && props.touched.dob) ? props.errors.dob : ''}
                    />
                    <InputCompOne
                      parentClass="max-w-[20.3125rem]"
                      label="Second Name"
                      name="second_name"
                      parentInputClass="w-full"
                      labelClass="font-bold text-[1.125rem] leading-[1.3613rem] tracking-[2%] text-[#5C2684] mb-[.125rem]"
                      input
                      inputClass="w-full h-[2.25rem] bg-[#EFEFEF] rounded-[.375rem] px-3"
                      value={props.values.second_name}
                      onChange={props.handleChange}
                      error={(props.errors.second_name && props.touched.second_name) ? props.errors.second_name : ''}
                    />
                  </div>
                </div>

                <div className='w-full'>
                  <div className="w-full rounded py-3 bg-[#5C2684] px-5 mt-5">
                    <p className="text-base text-[#FBB700] tracking-[3%] font-extrabold w-fit">
                      SPOUSE DETAILS ( If not applicable, please move to the next stage )
                    </p>
                  </div>
                  <div className="mt-8 grid grid-cols-2">
                    <div className="flex flex-col gap-4 max-w-[15.6875rem]">
                      <InputCompOne
                        parentClass="max-w-[20.3125rem]"
                        label="BVN"
                        name="spouse_bvn"
                        parentInputClass="w-full"
                        labelSpan="( To get your BVN, dial *565*0# )"
                        labelSpanClass="text-[11px] text-[#7a7373]"
                        labelClass="font-bold text-[1.125rem] leading-[1.3613rem] tracking-[2%] text-[#5C2684] mb-[.125rem]"
                        input
                        inputClass="w-full h-[2.25rem] bg-[#EFEFEF] rounded-[.375rem]"
                        value={props.values.spouse_bvn}
                        onChange={props.handleChange}
                        error={(props.errors.spouse_bvn && props.touched.spouse_bvn) ? props.errors.spouse_bvn : ''}
                      />
                    </div>
                  </div>
                </div>
                <>
                  <Button
                    className="mt-8 btn-R bg-[#5A2C82]"
                    text="Enter"
                    type="submit"
                  />
                </>
              </Form>
            )}
      </Formik>
    </>
  );
};

export default BasicInfo;



interface SelectOption {
  loading: boolean;
  data: {value: string;
  label: string}[]
}

const maritalStatusOptions: SelectOption = {
  loading: false,
  data: [
    { value: "", label: "Select" },
    { value: "single", label: "Single" },
    { value: "married", label: "Married" },
    { value: "divorced", label: "Divorced" },
    { value: "widowed", label: "Widowed" },
  ]
}

const titleOptions: SelectOption = {
  loading: false,
  data: [
    { value: "", label: "Select" },
    { value: "ms", label: "Ms" },
    { value: "mr", label: "Mr" },
    { value: "miss", label: "Miss" },
    { value: "mrs", label: "Mrs" },
  ]
}