import { useDispatch } from "react-redux";

import type { FormattedQuoteResponse } from "@hooks/apis/common/quote/types";
import { useActiveRoute } from "@hooks/apis/common/quote/useActiveRoute";
import { useBestRoutes } from "@hooks/apis/common/quote/useBestRoutes";
import { isManualQuote } from "@hooks/apis/common/quote/useQuote";
import { setActiveRoute } from "@store/routesSlice";
import { areBothRoutesSame } from "@utils/areBothRoutesSame";
import { RouteItem } from ".";
import { onSelectRoute } from "../../../analytics/events";
import { ComparisonItem } from "./ComparisonItem";
import { RouteItemSkeleton } from "./utils/SkeletonLoader";

export const RoutesWrapper = () => {
	const { bestRoute, fastestRoute } = useBestRoutes();
	const { data: activeRoute, isRefetching } = useActiveRoute();
	const dispatch = useDispatch();

	if (!bestRoute || !fastestRoute) return null;

	function setRoute(route: FormattedQuoteResponse) {
		dispatch(setActiveRoute(route));
	}

	const isBestRouteActive = areBothRoutesSame(bestRoute, activeRoute);
	const isFastestRouteActive = areBothRoutesSame(fastestRoute, activeRoute);
	const neitherRoutesSelected = !isBestRouteActive && !isFastestRouteActive;

	const emitEvent = (route: FormattedQuoteResponse) => {
		const protocol = isManualQuote(route) ? route.protocol : undefined;

		onSelectRoute({
			provider_name: protocol?.dexDetails?.protocol.name ?? "",
			source_chain_id: route.primaryInput.token.chainId,
			destination_chain_id: route.primaryOutput.token.chainId,
			source_token_symbol: route.primaryInput.token.symbol,
			destination_token_symbol: route.primaryOutput.token.symbol,
			input_amount_usd: Number(route.primaryInput.amount),
			estimated_output_amount: Number(route.minOutput?.formattedAmount),
			estimated_time: route.estimatedFulfilTime,
			provider_best_output: Number(route.primaryOutput.amount),
			provider_name_best_output: protocol?.dexDetails?.amountOut,
			provider_best_time: route.estimatedFulfilTime,
		});
	};

	return (
		<div className="bn-my-4 bn-w-full bn-space-x-2 bn-flex bn-items-start">
			{isRefetching ? (
				<>
					<RouteItemSkeleton />
					<RouteItemSkeleton />
				</>
			) : neitherRoutesSelected && activeRoute ? (
				<ComparisonItem
					route={activeRoute}
					isActive={true}
					onClick={() => {}}
					variant
				/>
			) : areBothRoutesSame(bestRoute, fastestRoute) ? (
				<ComparisonItem
					route={bestRoute}
					onClick={() => {
						setRoute(bestRoute);
						emitEvent(bestRoute);
					}}
					isActive={isBestRouteActive}
					tags={["best", "fast"]}
				/>
			) : (
				<>
					<RouteItem
						route={bestRoute}
						onClick={() => {
							setRoute(bestRoute);
							emitEvent(bestRoute);
						}}
						isActive={isBestRouteActive}
						tags={["best"]}
					/>
					<RouteItem
						route={fastestRoute}
						onClick={() => {
							setRoute(fastestRoute);
							emitEvent(fastestRoute);
						}}
						isActive={isFastestRouteActive}
						tags={["fast"]}
					/>
				</>
			)}
		</div>
	);
};
