"use client";

import { RiEyeFill, RiEyeOffFill, RiSearchLine } from "@remixicon/react";
import React from "react";
import { tv, type VariantProps } from "tailwind-variants";
import { cx, focusInput, focusRing, hasErrorInput } from "../lib/utils";

const inputStyles = tv({
	base: [
		"relative block w-full appearance-none rounded-md border px-2.5 py-2 shadow-sm outline-none transition sm:text-sm",
		"border-border",
		"text-foreground",
		"placeholder-muted-foreground",
		"bg-background",
		"disabled:border-border disabled:bg-muted disabled:text-muted-foreground",
		"[&::--webkit-search-cancel-button]:hidden [&::-webkit-search-cancel-button]:hidden [&::-webkit-search-decoration]:hidden",
		focusInput,
	],
	variants: {
		hasError: {
			true: hasErrorInput,
		},
		enableStepper: {
			false:
				"[appearance:textfield] [&::-webkit-inner-spin-button]:appearance-none [&::-webkit-outer-spin-button]:appearance-none",
		},
	},
});

interface OnboardingInputProps
	extends React.InputHTMLAttributes<HTMLInputElement>,
		VariantProps<typeof inputStyles> {
	inputClassName?: string;
}

const OnboardingInput = React.forwardRef<
	HTMLInputElement,
	OnboardingInputProps
>(
	(
		{
			className,
			inputClassName,
			hasError,
			enableStepper = true,
			type,
			...props
		},
		forwardedRef,
	) => {
		const [typeState, setTypeState] = React.useState(type);

		const isPassword = type === "password";
		const isSearch = type === "search";

		return (
			<div className={cx("relative w-full", className)}>
				<input
					ref={forwardedRef}
					type={isPassword ? typeState : type}
					className={cx(
						inputStyles({ hasError, enableStepper }),
						{
							"pl-8": isSearch,
							"pr-10": isPassword,
						},
						inputClassName,
					)}
					{...props}
				/>
				{isSearch && (
					<div
						className={cx(
							"pointer-events-none absolute bottom-0 left-2 flex h-full items-center justify-center",
							"text-muted-foreground",
						)}
					>
						<RiSearchLine
							className="size-[1.125rem] shrink-0"
							aria-hidden="true"
						/>
					</div>
				)}
				{isPassword && (
					<div
						className={cx(
							"absolute bottom-0 right-0 flex h-full items-center justify-center px-3",
						)}
					>
						<button
							aria-label="Change password visibility"
							className={cx(
								"h-fit w-fit rounded-sm outline-none transition-all",
								"text-muted-foreground",
								"hover:text-foreground",
								focusRing,
							)}
							type="button"
							onClick={() => {
								setTypeState(typeState === "password" ? "text" : "password");
							}}
						>
							<span className="sr-only">
								{typeState === "password" ? "Show password" : "Hide password"}
							</span>
							{typeState === "password" ? (
								<RiEyeFill aria-hidden="true" className="size-5 shrink-0" />
							) : (
								<RiEyeOffFill aria-hidden="true" className="size-5 shrink-0" />
							)}
						</button>
					</div>
				)}
			</div>
		);
	},
);

OnboardingInput.displayName = "OnboardingInput";

export { OnboardingInput, inputStyles, type OnboardingInputProps };