import { useDispatch, useSelector } from "react-redux";

import { MIcon } from "@components/common/MIcon";
import { TokenIcon } from "@components/common/TokenIcon";
import { useActiveRoute } from "@hooks/apis/common/quote/useActiveRoute";
import { toggleCompareModal } from "@store/globalSlice";
import type { ReduxStateType } from "@store/types";
import { adjustDecimals } from "@utils/adjustDecimals";
import { formatValue } from "@utils/formatValue";

export const CompareButton = () => {
	const { data: activeRoute } = useActiveRoute();
	const locale = useSelector((state: ReduxStateType) => state.settings.language);
	const dispatch = useDispatch();

	if (!activeRoute) return;

	const { primaryOutput } = activeRoute;
	function openModal() {
		dispatch(toggleCompareModal(true));
	}

	return (
		<div className="bn-flex bn-items-center bn-justify-between">
			<div className="bn-text-secondary bn-text-sm bn-flex bn-items-center">
				Min. {primaryOutput.token.symbol} Received:{" "}
				<div className="bn-flex bn-items-center bn-ml-1.5">
					<TokenIcon url={primaryOutput.token.logoURI} classNames="bn-w-4 bn-h-4" />
					<span className="bn-text-primary bn-font-medium bn-aeonik-font bn-pl-1">
						{adjustDecimals(
							formatValue(primaryOutput.minAmountOut, primaryOutput.token.decimals),
							3,
							locale,
						)}
					</span>
				</div>
			</div>

			<button
				type="button"
				onClick={openModal}
				className="bn-text-secondary bn-text-sm bn-font-normal bn-flex bn-items-center"
			>
				View All Routes{" "}
				<MIcon name="keyboard_arrow_right" classNames="bn-text-primary bn-ml-1" />
			</button>
		</div>
	);
};
