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 { useTheme } from "@hooks/useTheme";
import { getBorderRadius } from "@utils/getBorderRadius";
import { getOrderStatus } from "@utils/getOrderStatus";
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 theme = useTheme();
	const { inProgress, isPending, isCompleted, isExpired, isReverted } =
		getOrderStatus(statusCode);

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

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

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

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

	// biome-ignore format:
	const style = `bn-w-full bn-h-[140px] bn-overflow-hidden ${isExpired || isReverted ? '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()}
		</div>
	);
};
