import type { Input, Output, RouteDetails, STATUS_CODE } from "@/types/index";
import { BoltsIcon } from "@assets/graphics/BoltsIcon";
import type { AutoRefuel, ManualRefuel } from "@hooks/apis/common/quote/types";
import { useConfig } from "@hooks/useConfig";
import { useTheme } from "@hooks/useTheme";
import { getBorderRadius } from "@utils/getBorderRadius";
import { getOrderStatus } from "@utils/getOrderStatus";
import { twMerge } from "@utils/tailwindMerge";
import { CompletedState } from "./CompletedState";
import { ExpiredState } from "./ExpiredState";
import { InProgressState } from "./InProgressState";
import { PendingState } from "./PendingState";

export const InflightBanner = ({
	statusCode,
	input,
	output,
	timeStamp,
	protocol,
	refuel,
}: {
	statusCode: STATUS_CODE;
	input: Input[];
	output: Output[];
	timeStamp: number;
	protocol?: RouteDetails;
	refuel: AutoRefuel | ManualRefuel | null;
}) => {
	const { postSwapAction } = useConfig();
	const theme = useTheme();
	const {
		inProgress,
		isPending,
		isCompleted,
		isExpired,
		isReverted,
		isRefunded,
		isRefunding,
	} = getOrderStatus(statusCode);

	const renderContent = () => {
		if (isPending) {
			const tokenUrl = input?.[0]?.token?.logoURI ?? "";
			return <PendingState tokenUrl={tokenUrl} />;
		}

		if (inProgress) {
			const inputToken = input?.[0];
			const outputToken = output?.[0];
			if (!inputToken || !outputToken) {
				return null;
			}
			return (
				<InProgressState
					inputToken={inputToken}
					outputToken={outputToken}
					protocol={protocol}
					time={timeStamp}
				/>
			);
		}

		if (isCompleted) {
			const tokenUrl = output?.[0]?.token?.logoURI ?? "";
			return (
				<CompletedState tokenUrl={tokenUrl} time={timeStamp} refuel={refuel} />
			);
		}

		if (isExpired || isReverted || isRefunded || isRefunding) {
			return <ExpiredState />;
		}
	};

	const style = `bn-w-full bn-h-[140px] bn-overflow-hidden bn-relative ${
		isExpired || isReverted || isRefunded || isRefunding
			? "bn-bg-accent-4-text"
			: "bn-bg-theme"
	}`;

	return (
		<div
			className={style}
			style={{ borderRadius: getBorderRadius(theme.borderRadius, 12) }}
		>
			<div className="bn-absolute bn-w-full bn-left-0 bn-top-0">
				<BoltsIcon />
			</div>
			{renderContent()}
			{postSwapAction?.bannerAddon && isCompleted && (
				<div
					className={twMerge(
						"bn-absolute bn-bottom-0 bn-left-0",
						postSwapAction.bannerAddonClassNames,
					)}
				>
					{postSwapAction.bannerAddon}
				</div>
			)}
		</div>
	);
};
