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

import {Formik, Form} from 'formik'
import * as Yup from "yup";
import { applyForLoan } from '../../../core/apiRequest';

// import { useNavigate } from "react-router-dom";
// import { RouteHandler } from '../../../router/routes';

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

const initialValues = {
  account: "",
  checked: false
};

// To get the validation schema
const validationSchema = Yup.object().shape({
  account: Yup.string()
    .required("Required"),
  checked: Yup.bool() // use bool instead of boolean
  .oneOf([true], "You must accept the terms and conditions")
});

export default function DashboardHomeAttestation({handleNextStep, applicationDetails}:Props) {
  //     let navigate = useNavigate();
  // const navigateToProfile = () => navigate(RouteHandler.dashboardProfile);

  //FUNCTION TO HANDLE LOAN APPLICATION
  const handleSubmit = (values:any) => {
    delete values.checked
    applyForLoan({...applicationDetails, disbursement: values}).then(res=>{
      console.log('APPLY FOR LOAN', res)
      handleNextStep({disbursement: values})
      console.log('ApplicationDetails', {...applicationDetails, disbursement: values})
    }).catch(err=>{
      console.log(err)
    })
    // applyForLoan(payload).then(res=>{
    //   console.log('APPLY FOR LOAN', res)
    //   // handleNextStep({disbursement: values})
    // }).catch(err=>{
    //   console.log(err)
    // })
  };

  return (
    <div className="w-full">
      <div className="w-full flex justify-center">
        <Stepper step={4} />
      </div>
      <p className='my-10 text-red-500 text-lg md:text-2xl'>Applicant's Attestation and Debit Instruction</p>
      <p className='text-red-500 text-base'>NB: Must be your FCMB account number</p>
      <Formik
            initialValues={initialValues}
            validationSchema={validationSchema}
            onSubmit={handleSubmit}
          >
            {(props)=>(
              <Form>          
                <div className="flex flex-col gap-9">
                  <div className="flex items-center gap-[4.125rem]">
                    <InputCompOne
                      parentClass="max-w-[25.875rem] w-full flex flex-col gap-4"
                      name="account"
                      floatLabel="Disbursement account number"
                      // labelClass="font-bold text-[1.125rem]"
                      input
                      inputClass="w-full h-[3.625rem] bg-[#EFEFEF] px-4 rounded-[.375rem]"
                      placeholder="0102547896"
                      value={props.values.account}
                      onChange={props.handleChange}
                      error={(props.errors.account && props.touched.account) ? props.errors.account : ''}
                    />
                  </div>
                  <div className='max-w-[25.875rem]'>
                    <div className='flex gap-4 items-start'>
                      <input 
                        type='checkbox' 
                        name="checked"
                        className='w-4 h-4 p-2 accent-purple-600 text-purple-600 bg-gray-100 border-gray-300 rounded focus:ring-purple-500' 
                        onChange={props.handleChange}
                      />
                      <p className='text-[12px] text-justify'>By pressing, you agree that you have read, understood and accept the <span className='text-blue-600'>applicatant's attestation</span> and <span className='text-blue-600'>terms and conditions</span> for FCMB
                          premium salary loan. You also give us permission to collect financial information and run credit checks on the account provided through our partners
                      </p>
                    </div>
                    {props.errors.checked && props.touched.checked && <span className='text-[10px] text-red-500'>{props.errors.checked}</span>}
                  </div>
                  <Button
                    className="my-8 max-w-[25.875rem] btn-Y text-black w-full h-11"
                    text="Apply"
                    type="submit"
                  />
                </div>
              </Form>
            )}
      </Formik>
    </div>
  );
}


// const payload = {
//   "loan_amount": "100000",
//   "payment_month": "18",
//   "sales_agent": "Testing1234",
//   "gender": "male",
//   "address": "World bank housing Estate, Umuahia",
//   "marital_status": "single",
//   "state": "abia",
//   "email": "test5070@gmail.com",
//   "country": "NG",
//   "employment": {
//       "job_title": "Information Officer",
//       "name": "Testing Testing",
//       "sector": "private (non academic)",
//       "industry": "engineering",
//       "resumption_date": "2024-04-05",
//       "email": "test50700@gmail.com",
//       "annual_income": "600000",
//       "monthly_salary": "50000",
//       "salary_payment_date": "2024-04-19",
//       "employment_id": "2555566",
//       "highest_eductaion": "b.sc + professional qualification"
//   },
//   "loan_reference": [
//       {
//           "fullname": "John Mike",
//           "relationship": "Brother",
//           "phone_number": "07055566611",
//           "email": "refone@gmail.com",
//           "bvn": "11111111111"
//       },
//       {
//           "fullname": "Mary Paul",
//           "relationship": "Brother",
//           "phone_number": "07055577711",
//           "email": "reftwo@gmail.com",
//           "bvn": "22222222222"
//       }
//   ],
//   disbursement:{account: '1122334456'}
// }