import { useSelector } from "react-redux";

import { MIcon } from "@components/common/MIcon";
import { TransferType } from "@components/common/TransferType";
import { useFetchQuote } from "@hooks/apis/useFetchQuote";
import { useFetchV2Quote } from "@hooks/apis/useFetchV2Quote";
import { useTheme } from "@hooks/useTheme";
import type { ReduxStateType } from "@store/types";
import { adjustDecimals } from "@utils/adjustDecimals";
import { getBorderRadius } from "@utils/getBorderRadius";
import { RouteItem } from "./RouteItem";

export const CompareCard = ({ closePanel }: { closePanel: () => void }) => {
	const { borderRadius } = useTheme();
	const { formattedData: gatewayData } = useFetchV2Quote();
	const { data: autoSwapData } = useFetchQuote();

	if (!gatewayData || gatewayData.length === 0 || !autoSwapData) return null;

	const { estimatedFulfilTime, primaryOutput } = autoSwapData;

	const getDiffInOutput = () => {
		if (primaryOutput?.valueInUsd && gatewayData?.[0]) {
			return (
				primaryOutput?.valueInUsd - gatewayData?.[0]?.receivedValueInUsd
			).toString();
		}
	};

	return (
		<div className="bn-pb-1">
			<div className="bn-px-5 bn-py-[14px] bn-relative">
				<p className="bn-text-left bn-text-primary bn-text-base bn-font-semibold bn-mb-1 bn-leading-[19.2px]">
					Price Comparison
				</p>
				<button
					className="bn-size-6 bn-absolute bn-right-5 bn-top-0 bn-bottom-0 bn-flex bn-items-center bn-justify-center bn-cursor-pointer bn-bg-transparent bn-border-0 bn-my-auto"
					type="button"
					onClick={closePanel}
				>
					<MIcon name="close" classNames="bn-text-primary" />
				</button>
			</div>

			<div className="bn-px-5 bn-py-3">
				{/* Bungee Auto Details */}
				<div className="bn-mb-4">
					<AutoSwap
						estimatedFulfilTime={estimatedFulfilTime}
						savings={getDiffInOutput()}
						output={primaryOutput.valueInUsd}
					/>
				</div>

				{/* Other quote details */}
				<div className="bn-text-secondary bn-capitalize bn-text-sm bn-font-normal bn-flex bn-justify-between bn-mb-2.5">
					<span>Quotes</span>
					<span>Output</span>
				</div>

				<div
					className="bn-flex bn-flex-col bn-divide-y bn-divide-primary bn-space-y-[30px] bn-bg-layer-2 bn-p-3"
					style={{ borderRadius: getBorderRadius(borderRadius, 8) }}
				>
					{gatewayData?.slice(0, 2)?.map((route, index) => (
						<RouteItem key={route.routeId} route={route} />
					))}
				</div>
			</div>
		</div>
	);
};

const AutoSwap = ({
	estimatedFulfilTime,
	savings,
	output,
}: {
	estimatedFulfilTime: number;
	output?: number;
	savings?: string;
}) => {
	const { borderRadius } = useTheme();
	const locale = useSelector((state: ReduxStateType) => state.settings.language);

	return (
		<div
			className="bn-bg-layer-2 bn-w-full bn-overflow-hidden"
			style={{ borderRadius: getBorderRadius(borderRadius, 8) }}
		>
			<div className="bn-flex bn-items-center bn-space-x-2 bn-py-3 bn-px-4 bn-justify-between">
				<TransferType
					type="Auto"
					time={estimatedFulfilTime}
					iconProps={{ width: 24, height: 24 }}
				/>

				{output && (
					<span className="bn-text-base bn-font-medium bn-text-primary bn-aeonik-font">
						${adjustDecimals(output, 2, locale)}
					</span>
				)}
			</div>

			{savings && (
				<div className="bn-px-4 bn-py-2 bn-bg-accent2">
					<div className="bn-text-sm bn-font-medium bn-aeonik-font bn-text-primary bn-flex bn-flex-wrap">
						<MIcon name="bolt" classNames="bn-text-base bn-text-accent2" />
						<p className="bn-text-accent2 bn-pr-1">Best Price: </p>
						<p>
							Receive{" "}
							<span className="bn-text-success">
								${adjustDecimals(savings, 2, locale)} more
							</span>{" "}
							output
						</p>
					</div>
				</div>
			)}
		</div>
	);
};
