import React from "react";
import { cn } from "../../../../@/lib/utils";
import { Label } from "../Label";
import clsx from "clsx";
import { AlertCircleIcon } from "../../../icons";

export interface InputProps
  extends React.InputHTMLAttributes<HTMLInputElement> {
  label?: string;
  prefix?: string;
  isError?: boolean;
  errorMessage?: string;
  wrapperClassName?: string;
  prefixChildren?: any;
  suffixChildren?: any;
}

const Input = React.forwardRef<HTMLInputElement, InputProps>(
  (
    {
      className,
      type,
      id,
      label,
      prefix,
      required,
      isError,
      errorMessage,
      wrapperClassName,
      prefixChildren,
      suffixChildren,
      ...props
    },
    ref
  ) => {
    return (
      <div className={cn("relative", wrapperClassName)}>
        {label && (
          <Label htmlFor={id}>{`${label}${required ? "*" : ""}`}</Label>
        )}
        <div
          className={clsx(
            "flex items-center rounded-md border border-input bg-background w-full",
            {
              "border-error-500": isError,
            }
          )}
        >
          {prefixChildren}
          <input
            type={type}
            className={cn(
              "flex w-full h-[42px] focus-visible:outline-none rounded-lg text-sm ring-offset-background px-3 py-0 file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50",
              className,
              prefix ? "border-tl-0 border-bl-0" : "",
              isError ? "pr-0" : ""
            )}
            id={id}
            required={required}
            ref={ref}
            {...props}
          />
          {suffixChildren}
          {isError && <AlertCircleIcon className="mx-3" />}
        </div>
        {errorMessage && (
          <div className="absolute bottom-[-20px] left-0 text-error-500 text-sm">
            {errorMessage}
          </div>
        )}
      </div>
    );
  }
);

Input.displayName = "Input";

export { Input };
