import { useState, KeyboardEvent, HTMLAttributes, ReactElement } from "react";
import { RegisterOptions, useFormContext } from "react-hook-form";
import { isNullOrWhiteSpace } from "../../util/stringUtil";
import InputWrapper from "./inputParts/inputWrapper";
import InternalInput from "./inputParts/internalInput";

export type FieldArrayErrorConfig = {
  baseName: string;
  errorIndex: number;
  fieldName: string;
};

export type InputProps = {
  wrapperClassName?: string;
  inputClassName?: string;
  label: string;
  name: string;
  type: React.HTMLInputTypeAttribute;
  disabled?: boolean;
  registerWhenDisabled?: boolean;
  autoComplete?: string;
  registerOptions?: RegisterOptions;
  iconLeft?: ReactElement;
  onClickIcon?: () => void;
  iconRight?: ReactElement;
  updateFilteredOptions?: (currentInput: string) => void;
  setAutocompleteListActive?: (isListActive: boolean) => void;
  handleKeyPressed?: (event: KeyboardEvent<HTMLInputElement>) => void;
  inputMode?: HTMLAttributes<HTMLInputElement>["inputMode"];
  errorConfig?: FieldArrayErrorConfig;
  readonly?: boolean;
  selectOnFocus?: boolean;
  paragraph?: string | ReactElement;
  noBorder?: boolean;
};

export default function Input({
  setAutocompleteListActive,
  handleKeyPressed,
  updateFilteredOptions,
  iconLeft,
  iconRight,
  onClickIcon,
  inputClassName,
  wrapperClassName,
  label,
  type,
  name,
  autoComplete,
  disabled = false,
  registerWhenDisabled = false,
  registerOptions,
  inputMode,
  errorConfig,
  readonly,
  selectOnFocus,
  paragraph,
  noBorder = false,
}: InputProps) {
  const { getValues } = useFormContext();

  const [isActive, setIsActive] = useState(
    !isNullOrWhiteSpace(getValues(name) && !disabled)
  );
  const [inputState, setInputState] = useState<
    "default" | "active" | "error" | "disabled"
  >("default");
  const [hasFocus, setHasFocus] = useState(false);

  return (
    <>
      {paragraph && (
        <div className={`${disabled && "text-neutral-medium-light"} mb-1`}>
          {paragraph}
        </div>
      )}
      <InputWrapper
        wrapperClassName={wrapperClassName}
        isActive={isActive}
        inputState={inputState}
        setInputState={setInputState}
        hasFocus={hasFocus}
        disabled={disabled}
        hasDropdown={false}
        name={name}
        errorConfig={errorConfig}
        noBorder={noBorder}
      >
        <InternalInput
          autoComplete={autoComplete}
          inputClassName={inputClassName}
          inputState={inputState}
          iconLeft={iconLeft}
          iconRight={iconRight}
          onClickIcon={onClickIcon}
          updateFilteredOptions={updateFilteredOptions}
          id={name}
          name={name}
          label={label}
          inputMode={inputMode}
          disabled={disabled}
          registerWhenDisabled={registerWhenDisabled}
          type={type}
          setHasFocus={setHasFocus}
          isActive={isActive}
          setIsActive={setIsActive}
          handleKeyPressed={handleKeyPressed}
          setAutocompleteListActive={setAutocompleteListActive}
          registerOptions={registerOptions}
          readonly={readonly}
          selectOnFocus={selectOnFocus}
        />
      </InputWrapper>
    </>
  );
}