import { Button, InputCompOne, Stepper } from '../../shared/index';

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

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

const initialValues = {
  ref_name: "",
  ref_email: "",
  ref_phone_number: "",
  ref_relationship: "",
  ref_bvn: "",
  ref_two_name: "",
  ref_two_email: "",
  ref_two_phone_number: "",
  ref_two_relationship: "",
  ref_two_bvn: "",
};

// To get the validation schema
const validationSchema = Yup.object().shape({
  ref_name: Yup.string()
    .required("Required"),
  ref_email: Yup.string()
    .email("Invalid")
    .required("Required"),
  ref_phone_number: Yup.string()
    .required("Required"),
  ref_relationship: Yup.string()
    .required("Required"),
  ref_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"),
  ref_two_name: Yup.string()
    .required("Required"),
  ref_two_email: Yup.string()
    .email("Invalid")
    .required("Required"),
  ref_two_phone_number: Yup.string()
    .required("Required"),
  ref_two_relationship: Yup.string()
    .required("Required"),
  ref_two_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"),
});

export default function DashboardHomeRefereeInfo({handleNextStep}:Props) {

  //FUNCTION TO HANDLE SUBMIT
  const handleSubmit = (values:any) => {
    let refOne = {
      fullname: values.ref_name,
      relationship: values.ref_relationship,
      phone_number:  values.ref_phone_number,
      email:  values.ref_email,
      bvn:  values.ref_bvn
    }
    let refTwo = {
      fullname: values.ref_two_name,
      relationship: values.ref_two_relationship,
      phone_number:  values.ref_two_phone_number,
      email:  values.ref_two_email,
      bvn:  values.ref_two_bvn
    }
    handleNextStep({loan_reference:[refOne, refTwo]})
  };


  return (
    <div className="w-full">
      <div className="w-full flex justify-center">
        <Stepper step={3} />
      </div>
      <Formik
            initialValues={initialValues}
            validationSchema={validationSchema}
            onSubmit={handleSubmit}
          >
            {(props)=>(
              <Form>          
                <div className="mt-[3.25rem] flex flex-col gap-9">
                  <p className='text-red-500 text-lg md:text-2xl'>Reference Details <span className='text-base'>(Must be 18 years and above)</span></p>
                  <div className="flex items-center gap-[4.125rem]">
                    <div className='w-full max-w-[25.875rem]'>
                      <p className='text-red-500 text-base'>Reference one</p>
                      <div className='w-full flex flex-col gap-9'>
                          <InputCompOne
                              parentClass="max-w-[25.875rem] w-full flex flex-col gap-4"
                              name="ref_name"
                              floatLabel="Full name"
                              // labelClass="font-bold text-[1.125rem]"
                              input
                              inputClass="w-full h-[3.625rem] bg-[#EFEFEF] px-4 rounded-[.375rem]"
                              placeholder="John James"
                              value={props.values.ref_name}
                              onChange={props.handleChange}
                              error={(props.errors.ref_name && props.touched.ref_name) ? props.errors.ref_name : ''}
                          />
                          <InputCompOne
                              parentClass="max-w-[25.875rem] w-full flex flex-col gap-4"
                              name="ref_relationship"
                              floatLabel="Relationship"
                              // labelClass="font-bold text-[1.125rem]"
                              input
                              inputClass="w-full h-[3.625rem] bg-[#EFEFEF] px-4 rounded-[.375rem]"
                              placeholder="Sister"
                              value={props.values.ref_relationship}
                              onChange={props.handleChange}
                              error={(props.errors.ref_relationship && props.touched.ref_relationship) ? props.errors.ref_relationship : ''}
                          />
                          <InputCompOne
                              parentClass="max-w-[25.875rem] w-full flex flex-col gap-4"
                              name="ref_phone_number"
                              floatLabel="Phone number"
                              // labelClass="font-bold text-[1.125rem]"
                              input
                              inputClass="w-full h-[3.625rem] bg-[#EFEFEF] px-4 rounded-[.375rem]"
                              placeholder="07000000000"
                              value={props.values.ref_phone_number}
                              onChange={props.handleChange}
                              error={(props.errors.ref_phone_number && props.touched.ref_phone_number) ? props.errors.ref_phone_number : ''}
                          />
                          <InputCompOne
                              parentClass="max-w-[25.875rem] w-full flex flex-col gap-4"
                              name="ref_email"
                              floatLabel="Email address"
                              // labelClass="font-bold text-[1.125rem]"
                              input
                              inputClass="w-full h-[3.625rem] bg-[#EFEFEF] px-4 rounded-[.375rem]"
                              placeholder="demo@gamil.com"
                              value={props.values.ref_email}
                              onChange={props.handleChange}
                              error={(props.errors.ref_email && props.touched.ref_email) ? props.errors.ref_email : ''}
                          />
                          <InputCompOne
                              parentClass="max-w-[25.875rem] w-full flex flex-col gap-4"
                              name="ref_bvn"
                              floatLabel="BVN"
                              // labelClass="font-bold text-[1.125rem]"
                              input
                              inputClass="w-full h-[3.625rem] bg-[#EFEFEF] px-4 rounded-[.375rem]"
                              placeholder="2228457896"
                              value={props.values.ref_bvn}
                              onChange={props.handleChange}
                              error={(props.errors.ref_bvn && props.touched.ref_bvn) ? props.errors.ref_bvn : ''}
                          />
                      </div>
                    </div>
                      <div className='w-full max-w-[25.875rem]'>
                        <p className='text-red-500 text-base'>Reference two</p>
                        <div className='w-full flex flex-col gap-9'>
                          <InputCompOne
                              parentClass="max-w-[25.875rem] w-full flex flex-col gap-4"
                              name="ref_two_name"
                              floatLabel="Full name"
                              // labelClass="font-bold text-[1.125rem]"
                              input
                              inputClass="w-full h-[3.625rem] bg-[#EFEFEF] px-4 rounded-[.375rem]"
                              placeholder="John James"
                              value={props.values.ref_two_name}
                              onChange={props.handleChange}
                              error={(props.errors.ref_two_name && props.touched.ref_two_name) ? props.errors.ref_two_name : ''}
                          />
                          <InputCompOne
                              parentClass="max-w-[25.875rem] w-full flex flex-col gap-4"
                              name="ref_two_relationship"
                              floatLabel="Relationship"
                              // labelClass="font-bold text-[1.125rem]"
                              input
                              inputClass="w-full h-[3.625rem] bg-[#EFEFEF] px-4 rounded-[.375rem]"
                              placeholder="Sister"
                              value={props.values.ref_two_relationship}
                              onChange={props.handleChange}
                              error={(props.errors.ref_two_relationship && props.touched.ref_two_relationship) ? props.errors.ref_two_relationship : ''}
                          />
                          <InputCompOne
                              parentClass="max-w-[25.875rem] w-full flex flex-col gap-4"
                              name="ref_two_phone_number"
                              floatLabel="Phone number"
                              // labelClass="font-bold text-[1.125rem]"
                              input
                              inputClass="w-full h-[3.625rem] bg-[#EFEFEF] px-4 rounded-[.375rem]"
                              placeholder="07000000000"
                              value={props.values.ref_two_phone_number}
                              onChange={props.handleChange}
                              error={(props.errors.ref_two_phone_number && props.touched.ref_two_phone_number) ? props.errors.ref_two_phone_number : ''}
                          />
                          <InputCompOne
                              parentClass="max-w-[25.875rem] w-full flex flex-col gap-4"
                              name="ref_two_email"
                              floatLabel="Email address"
                              // labelClass="font-bold text-[1.125rem]"
                              input
                              inputClass="w-full h-[3.625rem] bg-[#EFEFEF] px-4 rounded-[.375rem]"
                              placeholder="demo@gamil.com"
                              value={props.values.ref_two_email}
                              onChange={props.handleChange}
                              error={(props.errors.ref_two_email && props.touched.ref_two_email) ? props.errors.ref_two_email : ''}
                          />
                          <InputCompOne
                              parentClass="max-w-[25.875rem] w-full flex flex-col gap-4"
                              name="ref_two_bvn"
                              floatLabel="BVN"
                              // labelClass="font-bold text-[1.125rem]"
                              input
                              inputClass="w-full h-[3.625rem] bg-[#EFEFEF] px-4 rounded-[.375rem]"
                              placeholder="2228457896"
                              value={props.values.ref_two_bvn}
                              onChange={props.handleChange}
                              error={(props.errors.ref_two_bvn && props.touched.ref_two_bvn) ? props.errors.ref_two_bvn : ''}
                          />
                        </div>
                      </div>
                  </div>
                  <Button
                    className="my-8 max-w-[25.875rem] btn-Y text-black w-full h-11"
                    text="Next"
                    type="submit"
                  />
                </div>
              </Form>
            )}
      </Formik>
    </div>
  );
}