import { useSelector } from "react-redux";

import { WarnBar } from "@components/common/WarnBar";
import { useActiveRoute } from "@hooks/apis/common/quote/useActiveRoute";
import { isAutoQuote } from "@hooks/apis/common/quote/useQuote";
import type { ReduxStateType } from "@store/types";

export const SlippageWarning = () => {
	const isVeryLowSlippage = useIsVeryLowSlippage();
	if (!isVeryLowSlippage) return;
	return (
		<WarnBar
			title="Recommended: Use Suggested Slippage"
			subtitle="We will find the best slippage for a successful swap."
			icon="settings"
			classNames="bn-rounded-lg bn-mt-2.5"
		/>
	);
};

export const useIsVeryLowSlippage = () => {
	const { data: activeRoute } = useActiveRoute();
	const slippage = useSelector(
		(state: ReduxStateType) => state.settings.slippage,
	);

	if (!isAutoQuote(activeRoute) || slippage === "dynamic") return false;

	return activeRoute.suggestedClientSlippage > Number(slippage);
};
