import { useSelector } from "react-redux";

import type { ReduxStateType } from "@store/types";
import { adjustDecimals } from "@utils/adjustDecimals";
import { AmountButton } from "./AmountButton";

export const Balance = ({
	balance,
	onAmountSelect,
}: {
	balance?: string;
	onAmountSelect?: (type: "25%" | "50%" | "75%" | "100%") => void;
}) => {
	const locale = useSelector(
		(state: ReduxStateType) => state.settings.language,
	);

	const buttons = [
		{ label: "25%", value: "25%" as const },
		{ label: "50%", value: "50%" as const },
		{ label: "75%", value: "75%" as const },
		{ label: "MAX", value: "100%" as const },
	];

	return (
		<div className="bn-text-sm bn-text-secondary bn-flex bn-items-center bn-ml-auto bn-aeonik-font group">
			{onAmountSelect && (
				<>
					{/* Mobile: No animation, all buttons visible */}
					<div className="bn-flex bn-gap-1 bn-mr-1 sm:bn-hidden">
						{buttons.map((button) => (
							<AmountButton
								key={button.value}
								onClick={() => onAmountSelect(button.value)}
							>
								{button.label}
							</AmountButton>
						))}
					</div>
					{/* Desktop: With animation */}
					<div className="bn-hidden sm:bn-flex bn-gap-1 bn-mr-1">
						{buttons.map((button, index) => {
							// Hover in: rightmost (MAX, index 3) appears first (0ms), then 75% (50ms), 50% (100ms), 25% (150ms)
							// Hover out: leftmost (25%, index 0) disappears first (0ms), then 50% (50ms), 75% (100ms), MAX (150ms)
							return (
								<div
									key={button.value}
									data-button-index={index}
									className="-translate-x-1 scale-90 opacity-0 transition-all duration-200 ease-out group-hover:translate-x-0 group-hover:scale-100 group-hover:opacity-100"
									style={{
										// Base delay for hover out (leftmost disappears first)
										// On hover, CSS variable overrides this for hover in (rightmost appears first)
										transitionDelay: `var(--hover-delay, ${index * 50}ms)`,
									}}
								>
									<AmountButton onClick={() => onAmountSelect(button.value)}>
										{button.label}
									</AmountButton>
								</div>
							);
						})}
					</div>
				</>
			)}
			<p>
				Bal:{" "}
				<span className="bn-text-primary">
					{adjustDecimals({ value: balance ?? "0", decimals: 3, locale })}
				</span>
			</p>
		</div>
	);
};
