import { Tooltip } from "@buzzwaretech/propel/tooltip";
import { cn } from "@buzzwaretech/utils";
import { Eye, EyeClosed } from "lucide-react";
import { useState } from "react";

type TPasswordInputProps = {
  id: string;
  value: string;
  onChange: (value: string) => void;
  placeholder?: string;
  className?: string;
  showToggle?: boolean;
  error?: boolean;
  autoComplete?: React.HTMLInputAutoCompleteAttribute;
};

export function PasswordInput({
  id,
  value,
  onChange,
  placeholder = "Enter your password",
  className,
  showToggle = true,
  error = false,
  autoComplete = "off",
}: TPasswordInputProps) {
  const [showPassword, setShowPassword] = useState(false);
  return (
    <div className="relative">
      <input
        id={id}
        type={showPassword ? "text" : "password"}
        value={value}
        onChange={(e) => onChange(e.target.value)}
        className={cn(
          "w-full rounded-md border bg-surface-1 px-3 py-2 pr-10 text-secondary transition-all duration-200 placeholder:text-placeholder focus:border-transparent focus:ring-2 focus:ring-accent-strong focus:outline-none",
          {
            "border-strong": !error,
            "border-danger-strong": error,
          },
          className,
        )}
        placeholder={placeholder}
        autoComplete={autoComplete}
      />
      {showToggle && (
        <Tooltip
          tooltipContent={showPassword ? "Hide password" : "Show password"}
          position="top"
        >
          <button
            type="button"
            onClick={() => setShowPassword(!showPassword)}
            className="absolute inset-y-0 right-0 flex items-center pr-3 text-secondary transition-colors duration-200 hover:text-primary"
          >
            <div className="relative h-4 w-4">
              <Eye
                className={cn(
                  "absolute inset-0 h-4 w-4 transition-all duration-300 ease-in-out",
                  showPassword
                    ? "scale-75 rotate-12 opacity-0"
                    : "scale-100 rotate-0 opacity-100",
                )}
              />
              <EyeClosed
                className={cn(
                  "absolute inset-0 h-4 w-4 transition-all duration-300 ease-in-out",
                  showPassword
                    ? "scale-100 rotate-0 opacity-100"
                    : "scale-75 -rotate-12 opacity-0",
                )}
              />
            </div>
          </button>
        </Tooltip>
      )}
    </div>
  );
}