"use client";

/* eslint-disable no-void */
/* eslint-disable jsx-a11y/no-static-element-interactions */
/* eslint-disable jsx-a11y/click-events-have-key-events */

/* eslint-disable jsx-a11y/label-has-associated-control */
import type { VariantProps } from "class-variance-authority";
import { AlertCircle } from "lucide-react";
import * as React from "react";

import { cn } from "@/libs/utils";

import styles from "./input.module.css";
import {
  containerVariants,
  iconVariants,
  inputVariants,
  labelVariants,
} from "./input.variants";

export interface InputHandles {
  focus: () => void;
}

export interface InputProps
  extends Omit<React.InputHTMLAttributes<HTMLInputElement>, "size">,
    VariantProps<typeof inputVariants> {
  leftIcon?: React.ReactNode;
  rightIcon?: React.ReactNode;
  isDisabled?: boolean;
  helperText?: string;
  isInvalid?: boolean;
  label?: string;
  errorMessage?: string;
  inputContentClassName?: string;
  fullWidth?: boolean;
  containerClassName?: string;
  innerRef?: unknown;
  as?: any;
  asProps?: InputProps["as"];
}

const Input = React.forwardRef<InputHandles, InputProps>(
  (
    {
      type,
      size = "md",
      leftIcon,
      isDisabled,
      helperText,
      errorMessage,
      isInvalid,
      rightIcon,
      label,
      className,
      inputContentClassName,
      containerClassName,
      fullWidth = false,
      innerRef,
      asProps,
      ...props
    },
    ref,
  ) => {
    const localInputRef = React.useRef<HTMLInputElement>(null);
    const inputRef = innerRef ?? localInputRef;
    const hasLabel = !!label;

    React.useImperativeHandle(ref, () => ({
      focus: () => {
        (inputRef as React.RefObject<HTMLInputElement>).current?.focus();
      },
    }));

    return (
      <div>
        <div
          onClick={
            !isDisabled
              ? () =>
                  void (
                    inputRef as React.RefObject<HTMLInputElement>
                  ).current?.focus()
              : undefined
          }
          className={cn(
            containerVariants({
              size,
              invalid: isInvalid,
              fullWidth,
              disabled: isDisabled,
            }),
            containerClassName,
          )}
        >
          <div
            className={cn(
              inputContentClassName,
              "flex w-full grow flex-col justify-center",
            )}
          >
            {props.as ? (
              <props.as
                id={props.name}
                ref={inputRef}
                type={type}
                className={cn(
                  inputVariants({ size, hasLabel }),
                  "peer",
                  className,
                )}
                disabled={isDisabled || props.disabled}
                onChange={!isDisabled ? props.onChange : undefined}
                aria-invalid={isInvalid}
                placeholder={label || props.placeholder}
                {...props}
                {...asProps}
              />
            ) : (
              <input
                id={props.name}
                ref={inputRef}
                type={type}
                className={cn(
                  inputVariants({ size, hasLabel }),
                  "peer",
                  className,
                )}
                disabled={isDisabled || props.disabled}
                onChange={!isDisabled ? props.onChange : undefined}
                aria-invalid={isInvalid}
                placeholder={label || props.placeholder}
                {...props}
                {...asProps}
              />
            )}

            {label && (
              <label
                htmlFor={props.name}
                className={cn(labelVariants({ textSize: size }))}
              >
                {label}
              </label>
            )}
          </div>

          {leftIcon && (
            <div className={cn(iconVariants({ position: "left", size }))}>
              {leftIcon}
            </div>
          )}
          {(rightIcon || isInvalid) && (
            <div className={cn(iconVariants({ position: "right", size }))}>
              {isInvalid ? (
                // eslint-disable-next-line tailwindcss/no-unnecessary-arbitrary-value
                <AlertCircle className="absolute right-[6px] top-[50%] -translate-y-1/2 text-error-500" />
              ) : (
                rightIcon
              )}
            </div>
          )}
        </div>
        {errorMessage && (
          <div className="mt-[6px]">
            <small className={cn(styles.helperText, "!text-error-500")}>
              {errorMessage}
            </small>
          </div>
        )}
        {helperText && (
          <div className="mt-[6px]">
            <small className={styles.helperText}>{helperText}</small>
          </div>
        )}
      </div>
    );
  },
);
Input.displayName = "Input";

export { Input };