import React, { useRef } from "react";
import Icons from "../../Icons";
import { Link } from "react-router-dom";

export default function InputCom({
  label,
  type,
  name,
  placeholder,
  iconName,
  passIcon,
  inputHandler,
  value,
  forgotPassword,
  onClick,
  disable,
  blurHandler,
}) {
  const inputRef = useRef(null)
  // Entry Validation
  // for Min Length:
  const minLengthValidation = () => {
    if (inputRef && inputRef?.current && inputRef?.current?.name === 'email') {
      return 7
    } else if (inputRef && inputRef?.current && inputRef?.current?.name === 'first_name') {
      return 3
    } else if (inputRef && inputRef?.current && inputRef?.current?.name === 'last_name') {
      return 3
    } else if (inputRef && inputRef?.current && inputRef?.current?.name === 'address') {
      return 5
    } else if (inputRef && inputRef?.current && inputRef?.current?.name === 'password') {
      return 8
    } else if (inputRef && inputRef?.current && inputRef?.current?.name === 'state') {
      return 3
    } else if (inputRef && inputRef?.current && inputRef?.current?.name === 'province') {
      return 3
    } else if (inputRef && inputRef?.current && inputRef?.current?.name === 'city') {
      return 3
    } else if (inputRef && inputRef?.current && inputRef?.current?.name === 'amount') {
      return 1
    }
  }

  // for MaxLength
  const maxLengthValidation = () => {
    if (inputRef && inputRef?.current && inputRef?.current?.name === 'email') {
      return 35
    } else if (inputRef && inputRef?.current && inputRef?.current?.name === 'first_name') {
      return 25
    } else if (inputRef && inputRef?.current && inputRef?.current?.name === 'last_name') {
      return 25
    } else if (inputRef && inputRef?.current && inputRef?.current?.name === 'address') {
      return 49
    } else if (inputRef && inputRef?.current && inputRef?.current?.name === 'password') {
      return 15
    } else if (inputRef && inputRef?.current && inputRef?.current?.name === 'state') {
      return 25
    } else if (inputRef && inputRef?.current && inputRef?.current?.name === 'province') {
      return 25
    } else if (inputRef && inputRef?.current && inputRef?.current?.name === 'city') {
      return 25
    } else if (inputRef && inputRef?.current && inputRef?.current?.name === 'amount') {
      return 9  
    }
  }
  return (
    <div className="input-com">
      <div className="flex items-center justify-between">
      {label && (
        <label
          className="input-label text-[#181c32] dark:text-white text-[13.975px] leading-[20.9625px] font-semibold block mb-2.5"
          htmlFor={name}
        >
          {label}
        </label>
      )}
      {forgotPassword && <Link to="/forgot-password" className="text-[13.975px] leading-[20.9625px] text-[#019ef7] hover:text-[#009ef7]">Forgot Password?</Link>}
      </div>
      <div className="input-wrapper border border-[#f5f8fa]] dark:border-[#5e6278] w-full rounded-[0.475rem] h-[42px] overflow-hidden relative font-medium leading-6 bg-clip-padding text-[#5e6278] dark:text-gray-100 bg-[#f5f8fa] dark:bg-[#5e6278] text-base ">
        <input
          placeholder={placeholder}
          value={value}
          onChange={inputHandler}
          className="input-field placeholder:text-base px-6 text-dark-gray dark:text-white w-full h-full bg-[#FAFAFA] dark:bg-[#11131F]  focus:ring-0 focus:outline-none"
          type={type}
          id={name}
          name={name}
          minLength={minLengthValidation()}
          maxLength={maxLengthValidation()}
          ref={inputRef}
          readOnly={disable}
          onBlur={blurHandler}
        />
        {iconName && (
          <div className="absolute right-6 bottom-[10px] z-10">
            <Icons name={iconName} />
          </div>
        )}
        {passIcon && (
          <div className="absolute right-6 bottom-[10px] z-10" onClick={onClick}>
            <Icons name={passIcon} />
          </div>
        )}
      </div>
    </div>
  );
}