import React from "react";
import { cn } from "../../lib/cn";
import { eyeClosed, eyeOpen } from "../../assets/icons/input";

interface inputProps {
  name?: string;
  type: "text" | "email" | "password" | "first_name";
  error?: string;
  disabled?: boolean;
  required?: boolean;
  label?: string;
  placeholder?: string;
  className?: string;
  onChange: (state: string) => void;
  defaultState?: string;
  autocomplete?: string;
}

export const Input: React.FC<inputProps> = ({
  type = "text",
  error = "",
  // disabled = false,
  // required = false,
  label = "",
  placeholder = "",
  className = "",
  onChange,
  defaultState = "",
  name = "",
  autocomplete="",
}) => {
  const [value, setValue] = React.useState<string>(defaultState);
  const [visible, setVIsible] = React.useState<boolean>(type != "password");

  React.useEffect(() => onChange(value), [value]);


  return (
    <div className={cn(
      "relative",
      className
    )}>
      <div className={cn("text-[18px] text-liquid-white font-medium h-[23px] mb-[10px] transition-all",
        label == "" && "h-0 mb-0"
      )}>
        {label}
      </div>
      <div className="relative">
        <input
          className={cn(
            "bg-liquid-lighter w-full rounded-[10px] outline-none pl-[16px] py-[8px] placeholder:text-liquid-light",
            type == "password" ? "h-[40px]" : "h-[36px]"
          )}
          name={name}
          autoComplete={autocomplete}
          type={type == "password" ? (visible ? "text" : "password") : type}
          placeholder={placeholder}
          onChange={(e) => {
            setValue(e.target.value);
          }} />
        {
          type == "password" &&
          <img src={visible ? eyeOpen : eyeClosed} className="w-[24px] h-[24px] cursor-pointer right-[16px] top-[8px] absolute" onClick={() => {
            setVIsible(!visible);
          }}/>
        }
      </div>

      <div className={cn("text-liquid-red text-[14px] h-[18px] text-right mt-[5px]",
        error == "" && "h-0 mt-0"
      )}>
        {error}
      </div>

    </div>
  );

};