import type { ReactNode } from "react";
import { useSelector } from "react-redux";

import type { FormattedAutoQuote } from "@hooks/apis/common/quote/types";
import { useActiveRoute } from "@hooks/apis/common/quote/useActiveRoute";
import { isAutoQuote } from "@hooks/apis/common/quote/useQuote";
import type { ReduxStateType } from "@store/types";
import { adjustDecimals } from "@utils/adjustDecimals";
import { formatValue } from "@utils/formatValue";
import { twMerge } from "@utils/tailwindMerge";
import { Stars } from "./Icons";

export const Rewards = ({
	classNames,
	children,
}: { classNames?: string; children?: ReactNode }) => {
	const { data: activeRoute } = useActiveRoute();
	if (!(isAutoQuote(activeRoute) && activeRoute?.rewards)) return <></>;

	const style = twMerge(
		"bn-flex bn-items-center bn-justify-between bn-bg-[#172B22] bn-px-4 bn-py-2 bn-text-accent-3 bn-text-sm bn-font-medium",
		classNames,
	);

	return (
		<div className={style}>
			<RewardsItem activeRoute={activeRoute} />
			{children}
		</div>
	);
};

export const RewardsItem = ({
	activeRoute,
}: { activeRoute: FormattedAutoQuote }) => {
	const locale = useSelector((state: ReduxStateType) => state.settings.language);
	if (!activeRoute?.rewards) return <></>;

	const { rewards } = activeRoute;
	const formattedAmount = formatValue(
		rewards.totalRewardAmount,
		rewards.token.decimals,
	);
	return (
		<div className="bn-flex bn-items-center">
			<Stars className="bn-text-accent-3 bn-mr-1" />
			<p>
				Est. Rewards:
				<span className="bn-text-accent-3 bn-pl-1">
					+{adjustDecimals(formattedAmount, 2, locale)} {rewards.token.symbol}
				</span>
			</p>
		</div>
	);
};
