digifi-www/src/components/GetStarted/LoanAmountComp.tsx

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

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

const initialValues = {
  monthly_salary: "",
  loan_amount: "",
  duration: 6
};

// To get the validation schema
const validationSchema = Yup.object().shape({
  duration: Yup.number()
    .required("Required"),
  monthly_salary: Yup.string()
    .required("Required")
    .test("no-e", "Invalid", (value:any) => {
      if (value && /^[0-9]*$/.test(value) == false) {
        return false;
      }
      return true;
    }),
  loan_amount: Yup.string()
    .required("Required")
    .test("no-e", "Invalid", (value:any) => {
      if (value && /^[0-9]*$/.test(value) == false) {
        return false;
      }
      return true;
    }),
});

// interface SliderProps {
//   handleSliderChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
//   value: number;
// }

interface LoanAmountProps {
  handleNextStep: any;
}

const LoanAmountComp: React.FC<LoanAmountProps> = ({ handleNextStep }) => {
  // const [value, setValue] = React.useState(6);

  // const handleSliderChange = (e: any) => {
  //   setValue(e.target.value);
  // };

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

  return (
    <>
      <div className="flex justify-between items-center w-full mt-8 mb-[2.8125rem]">
        <h1 className="font-semibold text-[38px] text-[#5C2684] my-[8px]">
          Loan Amount
        </h1>
        <div className="flex flex-col gap-[7px]">
          <p className="font-extrabold tracking-[3%] text-[#FBB700] underline">
            For more enquiries and support
          </p>
          <p className="font-extrabold tracking-[3%] text-[#5A5A5A]">
            Call: 09099000000
          </p>
          <p className="font-extrabold tracking-[3%] text-[#5A5A5A]">
            Email: fcmbloan@support.com
          </p>
        </div>
      </div>
      <Formik
            initialValues={initialValues}
            validationSchema={validationSchema}
            onSubmit={handleSubmit}
          >
            {(props)=>(
              <Form>           
                <div className="flex flex-col gap-[45px] justify-center ml-[40px] mb-[40px]">
                  <InputCompOne
                    parentClass="max-w-[29.4375rem] w-full"
                    label="Your Monthly Salary*"
                    name="monthly_salary"
                    parentInputClass="w-full"
                    labelClass="font-bold text-[18px] leading-[21.7808px] tracking-[2%] text-[#5C2684] mb-[2px]"
                    input
                    inputClass="w-full h-[51px] bg-[#EFEFEF] rounded-[6px] placeholder:text-green-600 placeholder:font-bold px-4"
                    placeholder="150,000"
                    value={props.values.monthly_salary}
                    onChange={props.handleChange}
                    error={(props.errors.monthly_salary && props.touched.monthly_salary) ? props.errors.monthly_salary : ''}
                  />

                  <div className="w-full border-[.1875rem] rounded-xl border-black min-h-[884px] py-4 px-8 max-w-[784px]">
                    <p className="leading-[22px] tracking-[3%] text-[#5C2684] w-[729px] mb-[2.625rem]">
                      The maximum amount you can apply for on this offer is based on the
                      information you shared with us in your loan application. We have
                      made this offer to suit your monthly remuneration and to enable you
                      pay your loan on-time
                    </p>
                    <InputCompOne
                      parentClass="max-w-[45.8125rem] w-full mb-3"
                      label="How much do you want to apply for?"
                      name="loan_amount"
                      parentInputClass="w-full"
                      labelClass="font-bold text-[18px] leading-[21.7808px] tracking-[2%] text-[#5C2684] mb-[2px]"
                      input
                      inputClass="w-full h-[51px] bg-[#EFEFEF] rounded-[6px] placeholder:text-green-600 placeholder:font-bold px-9"
                      placeholder="350,000"
                      value={props.values.loan_amount}
                      onChange={props.handleChange}
                      error={(props.errors.loan_amount && props.touched.loan_amount) ? props.errors.loan_amount : ''}
                    />
                    <div className="flex items-center justify-between w-full">
                      <div className=" h-[68px] flex flex-col py-1 px-[13px] shadow-md text-[#5C2684]">
                        <span>Minimum Offer:</span>
                        <p>
                          <b>N</b>100,000
                        </p>
                      </div>

                      <div className="h-[68px] flex flex-col py-1 px-[13px] shadow-md text-[#5C2684]">
                        <span>Maximum Offer:</span>
                        <p>
                          <b>N</b>500,000
                        </p>
                      </div>
                    </div>

                    <>
                      <div className="flex flex-col items-start mt-11 mb-16">
                        <p className="text-lg font-semibold">For how many months? <span className='text-[10px] text-red-500'>{(props.errors.duration && props.touched.duration) ? props.errors.duration : ''}</span></p>
                        <div className="w-full">
                          <input
                            type="range"
                            min="6"
                            max="24"
                            value={props.values.duration}
                            onChange={props.handleChange}
                            className="slider w-full h-2 bg-gray-300 rounded-lg appearance-none cursor-pointer"
                            style={{
                              background: `linear-gradient(90deg, #6B21A8 ${
                                ((props.values.duration - 6) / 18) * 100
                              }%, #D1D5DB ${((props.values.duration - 6) / 18) * 100}%)`,
                            }}
                          />
                        </div>
                        <div className="mt-4 text-lg font-semibold text-gray-700 w-full flex items-center text-center justify-center">
                          {props.values.duration} months
                        </div>
                      </div>
                    </>

                    <div className="w-full flex items-center justify-center flex-col">
                      <div className="w-[279px] h-[130px] mb-[76px] flex items-center justify-center flex-col">
                        <p className="text-[#FBB700]">Your Monthly Repayment</p>
                        <p>N</p>
                      </div>
                      <Button
                        className="max-w-[462px] w-full bg-[#5C2684] rounded h-[2.75rem]"
                        text="Submit"
                        type='submit'
                      />
                    </div>
                  </div>
                </div>
              </Form>
            )}
      </Formik>
    </>
  );
};

export default LoanAmountComp;

// const Slider: React.FC<SliderProps> = ({ handleSliderChange, value }) => {
//   return (
//     <div className="flex flex-col items-start mt-11 mb-16">
//       <p className="text-lg font-semibold">For how many months?</p>
//       <div className="w-full">
//         <input
//           type="range"
//           min="6"
//           max="24"
//           value={value}
//           onChange={handleSliderChange}
//           className="slider w-full h-2 bg-gray-300 rounded-lg appearance-none cursor-pointer"
//           style={{
//             background: `linear-gradient(90deg, #6B21A8 ${
//               ((value - 6) / 18) * 100
//             }%, #D1D5DB ${((value - 6) / 18) * 100}%)`,
//           }}
//         />
//       </div>
//       <div className="mt-4 text-lg font-semibold text-gray-700 w-full flex items-center text-center justify-center">
//         {value} months
//       </div>
//     </div>
//   );
// };