import React from "react";
import { cn } from "../utils";

type InputProps = React.DetailedHTMLProps<
  React.InputHTMLAttributes<HTMLInputElement>,
  HTMLInputElement
> & {
  className?: string;
  onEnter?: () => void;
  whiteBg?: boolean;
  noNeedKeyupEnter?: boolean;
  onKeyUp?: (e: any) => void;
};

const Input = React.forwardRef(function Input(
  { className, ...props }: InputProps,
  ref,
) {
  return (
    <InputBase
      className={cn("uikit-text-[16px] uikit-h-12 uikit-w-full", className)}
      {...props}
      ref={ref}
    />
  );
});

export default Input;

export const InputBase = React.forwardRef(function InputBase(
  { className, onEnter, whiteBg, ...props }: InputProps,
  ref,
) {
  return (
    <input
      className={cn(
        "uikit-bg-[var(--uikit-colors-reverse)] uikit-rounded-[40px] uikit-text-tc1 dark:uikit-text-tc1-dark  uikit-border uikit-border-tc1/10 dark:uikit-border-tc1-dark/10 uikit-box-border focus:uikit-outline-none focus:uikit-border-tc1 dark:focus:uikit-border-tc1-dark placeholder:uikit-text-[#C1C0D8]",
        className,
      )}
      {...props}
      ref={ref as React.Ref<HTMLInputElement>}
      onKeyUp={(e) => {
        if (props?.noNeedKeyupEnter) {
          return false;
        } else {
          if (onEnter && e.key === "Enter") {
            onEnter();
          }
          return props.onKeyUp?.(e);
        }
      }}
    />
  );
});