import { useActiveRoute } from "@hooks/apis/common/quote/useActiveRoute";
import { calculatePriceImpact } from "@utils/calculatePriceImpact";
import { MIcon } from "./MIcon";
import { Tooltip } from "./Tooltip";

export const PriceImpact = () => {
	const { data: activeRoute } = useActiveRoute();
	if (!activeRoute) return;

	const { primaryInput, primaryOutput } = activeRoute;

	const inputValueInUsd = primaryInput?.valueInUsd;
	const outputValueInUsd = primaryOutput?.valueInUsd;

	const priceImpact = calculatePriceImpact(inputValueInUsd, outputValueInUsd);

	if (!priceImpact) return;
	return (
		<div className="bn-aeonik-font bn-text-sm bn-text-accent-4 bn-flex bn-items-center">
			({priceImpact})
			<Tooltip content={<PriceImpactTooltipContent priceImpact={priceImpact} />}>
				<MIcon name="warning" classNames="bn-text-sm bn-ml-1 bn-cursor-pointer" />
			</Tooltip>
		</div>
	);
};

export const PriceImpactTooltipContent = ({
	priceImpact,
}: { priceImpact: string }) => {
	return (
		<span>
			There is a{" "}
			<span className="bn-text-accent-4">{priceImpact} high price impact</span>{" "}
			compared to the market price, which may result in a loss of funds.
		</span>
	);
};
