import { forwardRef } from "react";
import { getAssetPath, ASSETS } from "../../../../lib/assetUtils";
import type { TextInputViewProps } from "./TextInput.types";

export const TextInputView = forwardRef<HTMLInputElement, TextInputViewProps>(
  (
    {
      inputId,
      labelId,
      label,
      placeholder,
      value,
      name,
      type,
      disabled,
      error = false,
      className: _className,
      containerClasses,
      labelClasses,
      inputClasses,
      borderRadius,
      handleChange,
      handleFocus,
      handleBlur,
      handleMouseDown,
      showHelpIcon = true,
      inputWrapperClasses = "relative",
      focusRingClasses = "",
      textHint = false,
      formHeader = true,
      maxLength,
      helpIconAlt,
      hintDefault,
      autoComplete,
      inputMode,
      required = false,
      form,
      onKeyDown,
      state: _state,
      isFilled: _isFilled,
    },
    ref,
  ) => {
    const labelEl = label ? (
      formHeader ? (
        <div className="flex flex-wrap gap-[var(--measures-spacing-200,4px_8px)] items-baseline pr-[var(--measures-spacing-100,4px)] relative shrink-0 w-full">
          <div className="flex gap-[var(--measures-spacing-050,2px)] items-center relative shrink-0">
            <label
              id={labelId}
              htmlFor={inputId}
              className={`${labelClasses} font-medium text-[var(--color-content-default-primary)]`}
            >
              {label}
            </label>
            {showHelpIcon && (
              <div className="relative shrink-0 size-[12px]">
                {/* eslint-disable-next-line @next/next/no-img-element -- icon asset */}
                <img
                  src={getAssetPath(ASSETS.ICON_HELP)}
                  alt={helpIconAlt}
                  className="block max-w-none size-full"
                />
              </div>
            )}
          </div>
        </div>
      ) : (
        <label id={labelId} htmlFor={inputId} className="sr-only">
          {label}
        </label>
      )
    ) : null;

    return (
      <div className={containerClasses}>
        {labelEl}
        <div className={inputWrapperClasses}>
          <div className={disabled ? "opacity-40" : ""}>
            <input
              ref={ref}
              id={inputId}
              name={name}
              type={type}
              value={value}
              placeholder={placeholder}
              onChange={handleChange}
              onFocus={handleFocus}
              onBlur={handleBlur}
              onKeyDown={onKeyDown}
              onMouseDown={handleMouseDown}
              disabled={disabled}
              maxLength={maxLength}
              autoComplete={autoComplete}
              inputMode={inputMode}
              required={required}
              form={form}
              aria-invalid={error || undefined}
              aria-required={required || undefined}
              className={inputClasses}
              style={{ borderRadius }}
            />
          </div>
          {focusRingClasses && (
            <div className={focusRingClasses} aria-hidden="true" />
          )}
        </div>
        {textHint && (
          <div className="flex items-start relative shrink-0 w-full">
            <p className="flex-[1_0_0] text-x-small-paragraph min-h-px min-w-px relative text-[color:var(--color-content-default-tertiary,#b4b4b4)]">
              {typeof textHint === "string" ? textHint : hintDefault}
            </p>
          </div>
        )}
      </div>
    );
  },
);

TextInputView.displayName = "TextInputView";