import type { TextInputProps } from "$/types/InputTypes";
import clsx from "clsx";
import { useId } from "react";


export default function PhoneInput({
	id,
	className,
	inputClassName,
	labelClassName,
	name,
	maxLength,
	spellCheck,
	placeholder,
	value,
	onChange,
	onKeyDown,
	disabled
}: Readonly<TextInputProps>){
	const componentId = useId();
	const activeId = id ?? componentId;

	//TODO: Figure out how to setup phone number


	return (
		<div
			className={clsx(
				"flex flex-row items-center justify-center rounded-lg border-2 w-full",
				className
			)}
		>
			<div
				className="relative flex flex-row items-center justify-center px-2 py-1 w-full"
			>
				<input
					type="text"
					id={activeId}
					className={clsx(
						"peer bg-transparent outline-none placeholder-transparent w-full",
						inputClassName
					)}
					name={name}
					placeholder={placeholder}
					maxLength={maxLength}
					value={value}
					onChange={(e) => onChange?.(e.target.value)}
					onKeyDown={onKeyDown}
					disabled={disabled}
					spellCheck={spellCheck}
				/>
				<label
					className={clsx(
						"absolute ml-2 -top-3 left-0 text-sm rounded-md px-1 select-none cursor-default",
						"peer-placeholder-shown:top-0 peer-placeholder-shown:-left-1 peer-placeholder-shown:text-inherit peer-placeholder-shown:text-base peer-placeholder-shown:h-full peer-placeholder-shown:cursor-text peer-placeholder-shown:w-[99%]",
						"peer-focus:-top-3 peer-focus:left-0 peer-focus:text-sm peer-focus:w-auto peer-focus:h-auto",
						"flex items-center",
						labelClassName
					)}
					style={{ transitionProperty: "top, left, font-size, line-height", transitionTimingFunction: "cubic-bezier(0.4 0, 0.2, 1)", transitionDuration: "250ms" }}
					htmlFor={activeId}
				>
					{placeholder}
				</label>
			</div>
		</div>
	);
}

/*
function formatPhoneNumber(phoneNumber: string): string {
	const chars: string[] = [];

	// Separate the string into individual characters
	for(let cnt = 0;cnt < phoneNumber.length;++cnt){
		chars.push(phoneNumber.charAt(cnt));
	}

	// Add _ for any chars that don't exist
	for(let cnt = chars.length;cnt < 10;++cnt){
		chars.push("_");
	}

	// Put the values into the correct format
	return "(" + chars.slice(0, 3).join() + ") " + chars.slice(3, 6).join() + "-" + chars.slice(6).join();
}
*/