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

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

  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>
      <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="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"
        />

        <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"
            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"
          />
          <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>

          <Slider handleSliderChange={handleSliderChange} value={value} />

          <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="button"
              onClick={handleNextStep}
            />
          </div>
        </div>
      </div>
    </>
  );
};

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