import { Input, InputProps } from "@nextui-org/react";
import { ControllerFieldState } from "react-hook-form";
import { FaAsterisk } from "react-icons/fa6";

import {
  TEXT_INPUT_MAX_LENGTH,
  TEXT_INPUT_MIN_LENGTH,
} from "@/constants/signup-form-constants";

type InputFormProps = {
  blockCopyPaste?: boolean;
  fieldProps: any;
  fieldState: ControllerFieldState;
  forceDarkMode?: boolean;
  control?: any;
  name?: string;
};

type InputComponentProps = InputProps & InputFormProps;

function TextInput({
  variant = "faded",
  color,
  size,
  label,
  value,
  defaultValue,
  placeholder,
  description,
  startContent,
  endContent,
  fullWidth,
  isClearable = true,
  isRequired = true,
  isReadOnly,
  isDisabled,
  isInvalid,
  baseRef,
  disableAnimation,
  type = "text",
  fieldProps,
  fieldState,
  blockCopyPaste = false,
  forceDarkMode = false,
  classNames = {
    base: forceDarkMode ? "dark:text-white" : "text-black light",
    label: `block text-sm font-bold tracking-tight font-inter text-pretty ${
      forceDarkMode ? "dark:text-white" : ""
    }`,
    inputWrapper: "",
    innerWrapper: "",
    mainWrapper: "",
    input: `font-noto ${
      fieldState.invalid || isInvalid
        ? forceDarkMode
          ? "dark:text-white"
          : "text-black"
        : forceDarkMode
          ? "dark:text-white"
          : ""
    }`,
    clearButton: forceDarkMode
      ? "text-gray-400 hover:text-gray-300 dark:text-gray-400 dark:hover:text-gray-300"
      : "text-black hover:text-black/80",
    helperWrapper: "",
    description: `font-inter font-regular mt-0.5 text-[12px] leading-tight ${
      forceDarkMode ? "text-gray-400 dark:text-gray-400" : "text-gray-500"
    }`,
  },
  autoComplete,
}: InputComponentProps) {
  const handleValueChange = (val: string) => {
    if (type === "number") {
      fieldProps.onChange(parseFloat(val));
    } else {
      fieldProps.onChange(val);
    }
  };

  const handleClear = () => {
    fieldProps.onChange("");
  };

  return (
    <div>
      <span
        className={`text-sm font-bold text-black ${
          forceDarkMode ? "dark:text-white" : ""
        } tracking-tight font-inter pb-2 text-balance`}
        id={`${fieldProps?.name}-label`}
      >
        {label}{" "}
        {isRequired && (
          <>
            <FaAsterisk
              aria-hidden
              className="text-red-600 inline-block size-2 mb-2"
              focusable="false"
            />
            <span className="sr-only">required</span>
          </>
        )}
      </span>
      <Input
        {...fieldProps}
        autoComplete={autoComplete}
        baseRef={baseRef}
        classNames={classNames}
        color={color}
        defaultValue={defaultValue}
        description={description}
        disableAnimation={disableAnimation}
        endContent={endContent}
        fullWidth={fullWidth}
        id={fieldProps?.name}
        isClearable={isClearable}
        isDisabled={isDisabled}
        isInvalid={fieldState.invalid ?? isInvalid}
        isReadOnly={isReadOnly}
        isRequired={isRequired}
        maxLength={type === "number" ? undefined : TEXT_INPUT_MAX_LENGTH}
        minLength={type === "number" ? undefined : TEXT_INPUT_MIN_LENGTH}
        placeholder={placeholder}
        radius="sm"
        size={size}
        startContent={startContent}
        type={type}
        value={fieldProps?.value ?? value}
        variant={variant}
        onChange={(e) => handleValueChange(e.target.value)}
        onClear={handleClear}
        onCopy={blockCopyPaste ? (e) => e.preventDefault() : undefined}
        onCut={blockCopyPaste ? (e) => e.preventDefault() : undefined}
        onPaste={blockCopyPaste ? (e) => e.preventDefault() : undefined}
      />
    </div>
  );
}

export default TextInput;