Users-Wrench/src/components/Helpers/Inputs/InputCom/index.jsx

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,
  parentClass,
  labelClass,
  inputClass,
  fieldClass,
  onClick,
  disable,
  blurHandler,
  spanTag,
  inputBg
}) {
  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 ${parentClass}`}>
      <div className={`flex items-center justify-between mb-2.5 ${labelClass}`}>
        {label && (
          <label
            className="input-label text-[#181c32] dark:text-white text-[13.975px] leading-[20.9625px] font-semibold block"
            htmlFor={name}
            >
            {label}
            {spanTag && <span className="text-green-700 text-sm tracking-wide">{spanTag}</span>}
          </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 ${inputClass}`}
      >
        <input
          placeholder={placeholder}
          value={value}
          onChange={inputHandler}
          className={`input-field placeholder:text-base text-dark-gray dark:text-white w-full h-full ${inputBg ? inputBg: 'bg-[#FAFAFA]'} dark:bg-[#11131F] focus:ring-0 focus:outline-none ${fieldClass}`}
          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>
  );
}