import { projNameHighLimit, projNameLowLimit } from "../../Data/constants";
import { alphanumeric } from "../../Data/regex";

export default function ProjectNameInput(props: {
  name: string;
  onChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
}): JSX.Element {
  const name = props.name;
  return (
    <>
      <input
        className={
          name.length >= projNameLowLimit &&
          name.length <= projNameHighLimit &&
          alphanumeric.test(name)
            ? "border-2 border-green-500 dark:border-green-500 focus-visible:border-green-500 outline-none rounded-2xl w-full py-2 px-3 text-gray-700 leading-tight"
            : "border-2 border-red-600 dark:border-red-600 focus:border-red-600 outline-none rounded-2xl w-full py-2 px-3  text-gray-700 leading-tight"
        }
        spellCheck="false"
        id="New name"
        type="text"
        placeholder="Project name"
        value={name}
        onChange={props.onChange}
      />
      <div className="my-1">
        {!alphanumeric.test(name) && name !== "" && (
          <p className="text-red-600 pl-2 text-[13px] text-left">
            No special characters allowed
          </p>
        )}
        {(name.length < projNameLowLimit ||
          name.length > projNameHighLimit) && (
          <p className="text-red-600 pl-2 text-[13px] text-left">
            Project name must be 10-99 characters
          </p>
        )}
        {alphanumeric.test(props.name) &&
          name.length >= projNameLowLimit &&
          name.length <= projNameHighLimit && (
            <p className="text-green-500 pl-2 text-[13px] text-left">
              Valid project name!
            </p>
          )}
      </div>
    </>
  );
}