import { useDebounce } from "@uidotdev/usehooks";
import { useEffect, useState } from "react";
import { useTheme } from "../../hooks/useTheme";
import { getBorderRadius } from "../../utils/getBorderRadius";

export const CustomSlippage = ({
	setItem,
	item,
}: {
	setItem: (_value: string) => void;
	item?: { id: number; label: string };
}) => {
	const theme = useTheme();
	const [inputValue, setInputValue] = useState<number>();

	const debouncedValue = useDebounce(inputValue, 400);

	useEffect(() => {
		if (debouncedValue) setItem(debouncedValue?.toString());
	}, [debouncedValue, setItem]);

	useEffect(() => {
		if (item?.id) {
			setInputValue(item.id);
		}
	}, [item]);

	function setValue(_value: number) {
		if (_value <= 50) setInputValue(_value);
	}

	return (
		<div
			className="bn-bg-layer-3 bn-p-1 bn-mx-2 bn-text-primary bn-text-sm bn-font-normal bn-flex bn-items-center bn-justify-between bn-mb-2"
			style={{ borderRadius: getBorderRadius(theme.borderRadius, 4) }}
		>
			<input
				className="bn-bg-transparent bn-border-0 bn-w-[51px] bn-text-primary bn-text-sm"
				placeholder="Custom"
				type="number"
				value={inputValue}
				onChange={(e) => setValue(Number(e.target.value))}
			/>
			<span>%</span>
		</div>
	);
};
