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

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

const initialValues = {
  job_title: "",
  employer_name: "",
  employer_email:"",
  date_of_resumption: "",
  employee_id: "",
  annual_income: "",
  monthly_salary: "",
  salary_payment_date: "",
  ref_name: "",
  ref_email: "",
  ref_number: "",
  ref_relationship: "",
  ref_bvn: "",
  ref_two_name: "",
  ref_two_email: "",
  ref_two_number: "",
  ref_two_relationship: "",
  ref_two_bvn: "",
};

// To get the validation schema
const validationSchema = Yup.object().shape({
  job_title: Yup.string()
    .required("Required"),
  employer_name: Yup.string()
    .required("Required"),
  date_of_resumption: Yup.string()
    .required("Required"),
  employer_email: Yup.string()
    .email("Invalid")
    .required("Required"),
  annual_income: Yup.string()
    .required("Required")
    .test("no-e", "Invalid", (value:any) => {
      if (value && /^[0-9]*$/.test(value) == false) {
        return false;
      }
      return true;
    }),
  monthly_salary: Yup.string()
    .required("Required")
    .test("no-e", "Invalid", (value:any) => {
      if (value && /^[0-9]*$/.test(value) == false) {
        return false;
      }
      return true;
    }),
  salary_payment_date: Yup.string()
    .required("Required"),
  employee_id: Yup.string()
    .required("Required"),
    ref_name: Yup.string()
    .required("Required"),
  ref_email: Yup.string()
    .email("Invalid")
    .required("Required"),
  ref_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_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"),
});

interface YourAreAlmostThereProps {
  handleNextStep: any;
}

const YourAreAlmostThere: React.FC<YourAreAlmostThereProps> = ({ handleNextStep }) => {

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

  return (
    <>
      <h1 className="font-semibold text-[2.375rem] text-[#5C2684] my-[.5rem]">
        You’re almost there
      </h1>
      <Formik
            initialValues={initialValues}
            validationSchema={validationSchema}
            onSubmit={handleSubmit}
          >
            {(props)=>(
              <Form>           
                <div className="flex flex-col gap-6">
                  <>
                    <div className="w-full rounded py-3 bg-[#5C2684] px-5">
                      <p className="text-base text-[#FBB700] tracking-[3%] font-extrabold w-fit">
                        EMPLOYMENT DETAILS
                      </p>
                    </div>

                    <div className="flex flex-col gap-4">
                      <InputCompOne
                        parentClass="max-w-[17.9375rem] w-full"
                        label="Job Title"
                        name="job_title"
                        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.job_title}
                        onChange={props.handleChange}
                        error={(props.errors.job_title && props.touched.job_title) ? props.errors.job_title : ''}
                      />
                      <div className="flex items-center gap-[3.6875rem]">
                        <InputCompOne
                          parentClass="max-w-[23.1875rem] w-full"
                          label="Employer’s Name"
                          name="employer_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.employer_name}
                          onChange={props.handleChange}
                          error={(props.errors.employer_name && props.touched.employer_name) ? props.errors.employer_name : ''}
                        />
                        <InputCompOne
                          parentClass="max-w-[23.1875rem] w-full"
                          label="Employer’s Official Email"
                          name="employer_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.employer_email}
                          onChange={props.handleChange}
                          error={(props.errors.employer_email && props.touched.employer_email) ? props.errors.employer_email : ''}
                        />
                      </div>
                      <div className="flex items-center gap-[9rem]">
                        <InputCompOne
                          parentClass="max-w-[17.9375rem] w-full"
                          label="Resumption Date"
                          name="date_of_resumption"
                          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]"
                          value={props.values.date_of_resumption}
                          onChange={props.handleChange}
                          error={(props.errors.date_of_resumption && props.touched.date_of_resumption) ? props.errors.date_of_resumption : ''}
                        />
                        <InputCompOne
                          parentClass="max-w-[17.9375rem] w-full"
                          label="Employee ID."
                          name="employee_id"
                          labelSpan="Upload your work ID"
                          labelSpanClass="text-[11px] text-[#7a7373]"
                          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.employee_id}
                          onChange={props.handleChange}
                          error={(props.errors.employee_id && props.touched.employee_id) ? props.errors.employee_id : ''}
                        />
                      </div>
                      <div className="flex items-center gap-[3.6875rem]">
                        <InputCompOne
                          parentClass="max-w-[23.1875rem] w-full"
                          label="Salary ( Gross annual income )"
                          name="annual_income"
                          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.annual_income}
                          onChange={props.handleChange}
                          error={(props.errors.annual_income && props.touched.annual_income) ? props.errors.annual_income : ''}
                        />
                        <InputCompOne
                          parentClass="max-w-[23.1875rem] w-full"
                          label="Salary ( Net monthly Income )"
                          name="monthly_salary"
                          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.monthly_salary}
                          onChange={props.handleChange}
                          error={(props.errors.monthly_salary && props.touched.monthly_salary) ? props.errors.monthly_salary : ''}
                        />
                      </div>
                      <InputCompOne
                        parentClass="max-w-[20.3125rem]"
                        label="Salary Payment Date"
                        name="salary_payment_date"
                        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]"
                        value={props.values.salary_payment_date}
                        onChange={props.handleChange}
                        error={(props.errors.salary_payment_date && props.touched.salary_payment_date) ? props.errors.salary_payment_date : ''}
                      />
                    </div>
                  </>
                  
                  <>
                    <div className="w-full rounded py-3 bg-[#5C2684] px-5">
                      <p className="text-base text-[#FBB700] tracking-[3%] font-extrabold w-fit">
                        REFERENCE DETAILS ( Must be 18 years and above )
                      </p>
                    </div>
                    <div className="">
                      <div className="flex flex-col gap-[3.4375rem]">
                        <div className="flex flex-col gap-4">
                          <div className="flex items-center gap-[6.5625rem]">
                            <InputCompOne
                              parentClass="max-w-[20.3125rem] w-full"
                              label="Name"
                              name="ref_name"
                              labelSpan="1st reference"
                              labelSpanClass="text-[12px] text-[#5C2684] ml-1"
                              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] px-[.125rem] rounded-[.375rem]"
                              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-[20.3125rem] w-full"
                              label="Relationship with He/She"
                              name="ref_relationship"
                              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] px-[.125rem] rounded-[.375rem]"
                              value={props.values.ref_relationship}
                              onChange={props.handleChange}
                              error={(props.errors.ref_relationship && props.touched.ref_relationship) ? props.errors.ref_relationship : ''}
                            />
                          </div>
                          <div className="flex items-center gap-[6.5625rem]">
                            <InputCompOne
                              parentClass="max-w-[20.3125rem] w-full"
                              label="Phone Number"
                              name="ref_number"
                              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.ref_number}
                              onChange={props.handleChange}
                              error={(props.errors.ref_number && props.touched.ref_number) ? props.errors.ref_number : ''}
                            />
                            <InputCompOne
                              parentClass="max-w-[20.3125rem] w-full"
                              label="Email Address"
                              name="ref_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.ref_email}
                              onChange={props.handleChange}
                              error={(props.errors.ref_email && props.touched.ref_email) ? props.errors.ref_email : ''}
                            />
                          </div>
                          <InputCompOne
                            parentClass="max-w-[20.3125rem] w-full"
                            label="BVN"
                            name="ref_bvn"
                            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.ref_bvn}
                            onChange={props.handleChange}
                            error={(props.errors.ref_bvn && props.touched.ref_bvn) ? props.errors.ref_bvn : ''}
                          />
                        </div>
                        <div className="flex flex-col gap-4">
                          <div className="flex items-center gap-[6.5625rem]">
                            <InputCompOne
                              parentClass="max-w-[20.3125rem] w-full"
                              label="Name"
                              name="ref_two_name"
                              labelSpan="2nd reference"
                              labelSpanClass="text-[12px] text-[#5C2684] ml-[4px]"
                              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.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-[20.3125rem] w-full"
                              label="Relationship with He/She"
                              name="ref_two_relationship"
                              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.ref_two_relationship}
                              onChange={props.handleChange}
                              error={(props.errors.ref_two_relationship && props.touched.ref_two_relationship) ? props.errors.ref_two_relationship : ''}
                            />
                          </div>
                          <div className="flex items-center gap-[6.5625rem]">
                            <InputCompOne
                              parentClass="max-w-[20.3125rem] w-full"
                              label="Phone Number"
                              name="ref_two_number"
                              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.ref_two_number}
                              onChange={props.handleChange}
                              error={(props.errors.ref_two_number && props.touched.ref_two_number) ? props.errors.ref_two_number : ''}
                            />
                            <InputCompOne
                              parentClass="max-w-[20.3125rem] w-full"
                              label="Email Address"
                              name="ref_two_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.ref_two_email}
                              onChange={props.handleChange}
                              error={(props.errors.ref_two_email && props.touched.ref_two_email) ? props.errors.ref_two_email : ''}
                            />
                          </div>
                          <InputCompOne
                            parentClass="max-w-[20.3125rem] w-full"
                            label="BVN"
                            name="ref_two_bvn"
                            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.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-[20.3125rem] btn-R bg-[#5A2C82]"
                    text="Continue"
                    type="submit"
                  />
                </div>
              </Form>
            )}
      </Formik>
    </>
  );
};

export default YourAreAlmostThere;