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,
  direction
}) {
  const inputRef = useRef(null);
  // Entry Validation
  // for Min Length:
  const minLengthValidation = () => {
    const inputConfig = inputConfigs[inputRef?.current?.name]?.minLength;
    return inputConfig || 0;
  };

  // for MaxLength
  const maxLengthValidation = () => {
    const inputConfig = inputConfigs[inputRef?.current?.name]?.maxLength;
    return inputConfig || 30;
  };

  // for Patterns
  const inputPatterns = () => {
    const inputConfig = inputConfigs[inputRef?.current?.name]?.pattern;
    return inputConfig || ""
  }
  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 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()}
          pattern={() => inputPatterns}
          ref={inputRef}
          readOnly={disable}
          onBlur={blurHandler}
          dir={direction}
        />
        {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>
  );
}

const inputConfigs = {
  email: { minLength: 7, maxLength: 30 },
  first_name: { minLength: 3, maxLength: 25, pattern: "[a-zA-Z]+" },
  last_name: { minLength: 3, maxLength: 25, pattern: "[a-zA-Z]+" },
  address: { minLength: 5, maxLength: 49, pattern: "[a-zA-Z0-9]+" },
  password: { minLength: 8, maxLength: 15, pattern: ".{8,}" },
  state: { minLength: 3, maxLength: 25, pattern: "[a-zA-Z]+" },
  province: { minLength: 3, maxLength: 25, pattern: "[a-zA-Z]+" },
  city: { minLength: 3, maxLength: 25, pattern: "[a-zA-Z]+" },
  amount: { minLength: 1, maxLength: 9, pattern: "[0-9]+" },
};

/* Numbers Only: <input type="text" pattern="[0-9]*" /> strictly numbers
Alphabets Only: <input type="text" pattern="[a-zA-Z]+" /> strictly alphabets
Alphanumeric: <input type="text" pattern="[a-zA-Z0-9]+" /> mix
Password: <input type="text" pattern=".{8,}" /> a minimum of 8 characters 
*/