import { useDispatch } from "react-redux";

import { ModalCloseBtn } from "@components/common/ModalHeader";
import { ComparisonItem } from "@components/common/RouteItem/ComparisonItem";
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 { isAutoQuote, isManualQuote } from "@hooks/apis/common/quote/useQuote";
import { setActiveRoute } from "@store/routesSlice";
import { areBothRoutesSame } from "@utils/areBothRoutesSame";
import { useEffect } from "react";
import { onSelectRoute, onViewRouteComparison } from "../../analytics/events";

export const CompareCard = ({ closePanel }: { closePanel: () => void }) => {
	const dispatch = useDispatch();
	const {
		autoRoute: autoQuote,
		manualRoutes: formattedManualRoutes,
		bestRoute,
		fastestRoute,
	} = useBestRoutes();
	const { data: activeRoute } = useActiveRoute();

	useEffect(() => {
		onViewRouteComparison();
	}, []);

	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-pb-1">
			<div className="bn-px-5 bn-py-[14px] bn-relative bn-flex bn-items-center bn-justify-between bn-border-b bn-border-subtle bn-border-solid">
				<div>
					<p className="bn-text-left bn-text-primary bn-text-base bn-font-semibold bn-mb-1 bn-leading-[19.2px]">
						Browse Options
					</p>
					<p className="bn-text-sm bn-font-normal bn-text-secondary">
						Compare price and select preferred route
					</p>
				</div>
				<ModalCloseBtn closeModal={closePanel} />
			</div>

			<div className="bn-px-5 bn-py-3">
				{/* Bungee Auto Details */}
				{autoQuote && (
					<>
						<div className="bn-text-secondary bn-capitalize bn-text-sm bn-font-medium bn-mb-2">
							<span>Bungee Auto</span>
						</div>
						<div className="bn-mb-4">
							<ComparisonItem
								route={autoQuote}
								isActive={isAutoQuote(activeRoute)}
								onClick={() => {
									dispatch(setActiveRoute(autoQuote));
									emitEvent(autoQuote);
									closePanel();
								}}
								tags={getTags(autoQuote, bestRoute, fastestRoute)}
								bestRoute={bestRoute}
							/>
						</div>
					</>
				)}

				{/* Other quote details */}
				{formattedManualRoutes?.length && (
					<>
						<div className="bn-text-secondary bn-capitalize bn-text-sm bn-font-medium bn-mb-2">
							<span>Bungee Manual</span>
						</div>

						<div className="bn-space-y-2">
							{formattedManualRoutes?.map((route) => (
								<ComparisonItem
									key={route.routeId}
									route={route}
									isActive={
										isManualQuote(activeRoute) ? activeRoute?.routeId === route.routeId : false
									}
									onClick={() => {
										dispatch(setActiveRoute(route));
										emitEvent(route);
										closePanel();
									}}
									tags={getTags(route, bestRoute, fastestRoute)}
									bestRoute={bestRoute}
								/>
							))}
						</div>
					</>
				)}
			</div>
		</div>
	);
};

const getTags = (
	route: FormattedQuoteResponse,
	bestRoute?: FormattedQuoteResponse,
	fastRoute?: FormattedQuoteResponse,
): Array<"best" | "fast"> | undefined => {
	const isBestRouteActive = areBothRoutesSame(bestRoute, route);
	const isFastestRouteActive = areBothRoutesSame(fastRoute, route);

	if (isBestRouteActive && isFastestRouteActive) return ["best", "fast"];
	if (isBestRouteActive) return ["best"];
	if (isFastestRouteActive) return ["fast"];
	return undefined;
};
