import type { ReactNode } from "react";

import type { Input, Output, RouteDetails } from "@/types/index";
import { BungeeIcon } from "@components/common/Icons";
import { TokenIcon } from "@components/common/TokenIcon";
import { useMappedChainData } from "@hooks/useMappedChainData";
import { SwapTime } from "../SwapTime";

export const InProgressState = ({
	inputToken,
	outputToken,
	time,
	protocol,
}: {
	inputToken: Input;
	outputToken: Output;
	time: number;
	protocol?: RouteDetails;
}) => {
	const mappedChainData = useMappedChainData();
	const inputTokenUrl = inputToken?.token?.logoURI;
	const outputTokenUrl = outputToken?.token?.logoURI;

	const inputNetworkUrl = mappedChainData?.[inputToken?.token?.chainId]?.icon;
	const outputNetworkUrl = mappedChainData?.[outputToken?.token?.chainId]?.icon;

	const networkIconStyle =
		"bn-absolute -bn-right-2 -bn-bottom-0.5 bn-size-7 bn-border-3 bn-border-black/10 bn-border-solid";

	return (
		<div className="bn-w-full bn-h-full bn-relative bn-flex bn-items-center">
			<div className="bn-w-1/2 bn-h-px bn-absolute bn-inset-0 bn-m-auto bn-border-b-1 bn-border-[#1F2023]/15 bn-border-dashed" />

			<div className="bn-flex bn-w-full bn-justify-between bn-relative bn-items-center">
				<TokenContainer rtl>
					<TokenIcon url={inputTokenUrl} classNames="bn-size-[52px]" />
					{inputNetworkUrl && (
						<TokenIcon url={inputNetworkUrl} classNames={networkIconStyle} />
					)}
				</TokenContainer>

				<div className="bn-flex bn-flex-col bn-items-center bn-justify-center bn-relative bn-w-full">
					<div className="bn-w-full bn-h-1 bn-border-b bn-border-dashed bn-border-[#1F202329] bn-absolute bn-top-0 bn-left-0 bn-bottom-0 bn-my-auto" />
					{protocol ? (
						<TokenIcon url={protocol.logoURI} classNames="bn-size-10" />
					) : (
						<BungeeIcon className="bn-size-10 bn-border-[3px] bn-border-solid bn-border-black bn-rounded-full" />
					)}
					<div className="bn-absolute bn-top-[44px]">
						<SwapTime
							label={protocol ? "Est. Time" : "Swap Time"}
							time={time}
							isAuto={!protocol}
						/>
					</div>
				</div>

				<TokenContainer>
					<TokenIcon url={outputTokenUrl} classNames="bn-size-[52px]" />
					{outputNetworkUrl && (
						<TokenIcon url={outputNetworkUrl} classNames={networkIconStyle} />
					)}
				</TokenContainer>
			</div>
		</div>
	);
};

const TokenContainer = ({
	rtl,
	children,
}: { rtl?: boolean; children: ReactNode }) => {
	// biome-ignore format:
	const style = `bn-h-[52px] bn-w-[100px] bn-from-[#FFD697] bn-to-[#FFD697]/15 bn-relative ${rtl ? 'bn-bg-gradient-to-tl' : 'bn-bg-gradient-to-tr'}`

	// biome-ignore format:
	const tokenStyle = `bn-size-[52px] bn-absolute ${rtl ? '-bn-right-[26px]' : '-bn-left-[26px]'}`
	return (
		<div className={style}>
			<div className={tokenStyle}>{children}</div>
		</div>
	);
};
