import clsx from "clsx";
import { useState } from "react";

interface Props {
	type: "email" | "text" | "password" | "tel" | "number" | "textarea";
	roundness?: "full" | "xl";
	required?: boolean;
	label?: string;
	placeholder?: string;
	defaultValue?: string | number;
	value?: string | number;
	className?: string;
	disabled?: boolean;
	max?: number;
	name: string;
	onChange: (value: string) => void;
}

export default function Input({
	type,
	label,
	placeholder,
	name,
	required = false,
	value,
	defaultValue,
	max,
	className,
	roundness = "full",
	disabled = false,
	onChange,
}: Props) {
	const [showPassword, setShowPassword] = useState(false);

	if (type === "textarea") {
		return (
			<textarea
				onContextMenu={(e) => e.preventDefault()}
				className="w-full h-full cursor-text px-7 py-8 input border-2 border-mti-gray-platinum bg-white rounded-3xl min-h-[200px]"
				onChange={(e) => onChange(e.target.value)}
				value={value}
				placeholder={placeholder}
				spellCheck={false}
			/>
		);
	}


	if (type === "password") {
		return (
			<div className="relative flex flex-col gap-3 w-full">
				{label && (
					<label className="font-normal text-base text-mti-gray-dim">
						{label}
						{required ? " *" : ""}
					</label>
				)}
				<div className="w-full h-fit relative">
					<input
						type={showPassword ? "text" : "password"}
						name={name}
						onChange={(e) => onChange(e.target.value)}
						placeholder={placeholder}
						defaultValue={defaultValue}
						className="w-full px-8 py-6 text-sm font-normal placeholder:text-mti-gray-cool bg-white rounded-full border border-mti-gray-platinum focus:outline-none"
					/>
					<p
						role="button"
						onClick={() => setShowPassword((prev) => !prev)}
						className="text-xs cursor-pointer absolute bottom-1/2 translate-y-1/2 right-8">
						{showPassword ? "Hide" : "Show"}
					</p>
				</div>
			</div>
		);
	}

	return (
		<div className={clsx("flex flex-col gap-3 w-full", className)}>
			{label && (
				<label className="font-normal text-base text-mti-gray-dim">
					{label}
					{required ? " *" : ""}
				</label>
			)}
			<input
				type={type}
				name={name}
				disabled={disabled}
				value={value}
				max={max}
				onChange={(e) => onChange(e.target.value)}
				min={type === "number" ? 0 : undefined}
				placeholder={placeholder}
				className={clsx(
					"px-8 py-6 text-sm font-normal bg-white border border-mti-gray-platinum focus:outline-none",
					"placeholder:text-mti-gray-cool disabled:bg-mti-gray-platinum/40 disabled:text-mti-gray-dim disabled:cursor-not-allowed",
					roundness === "full" ? "rounded-full" : "rounded-xl",
				)}
				required={required}
				defaultValue={defaultValue}
			/>
		</div>
	);
}