import { useSelector } from "react-redux";

import { useMappedChainData } from "@hooks/useMappedChainData";
import type { ReduxStateType } from "@store/types";
import { adjustDecimals } from "@utils/adjustDecimals";
import type { Token } from "../../Providers/ConfigProvider";
import { TokenIcon } from "./TokenIcon";

export const TokenDetails = ({
	token,
	rtl = false,
	amount,
	showTokens = false,
}: { token: Token; rtl?: boolean; amount: string; showTokens?: boolean }) => {
	const mappedChainData = useMappedChainData();
	const locale = useSelector((state: ReduxStateType) => state.settings.language);
	const networkUrl = mappedChainData?.[token?.chainId]?.icon;

	if (!token)
		return (
			<div className="bn-animate-pulse">
				<div className="bn-h-3 bn-bg-layer-2 bn-w-[60px]" />
				<div className="bn-h-3 bn-bg-layer-2 bn-w-[100px]" />
			</div>
		);

	const chain = mappedChainData?.[token.chainId]?.name;

	return (
		// biome-ignore format:
		<div className={`bn-flex bn-items-center bn-flex-1 ${rtl ? 'bn-flex-row-reverse bn-space-x-reverse bn-space-x-2' : 'bn-justify-start bn-space-x-2.5'}`}>
			{showTokens && (
				<div className="bn-size-7 bn-rounded-full bn-relative">
					<TokenIcon classNames="bn-size-full" url={token.logoURI} />
					<TokenIcon
						classNames="bn-size-4 bn-absolute -bn-right-1 -bn-bottom-0.5"
						url={networkUrl ?? ""}
					/>
				</div>
			)}

			<div 
				// biome-ignore format:
				className={`bn-flex bn-flex-col ${rtl ? 'bn-items-end' : 'bn-items-start'}`}
			>
				<p className="bn-text-[13px] bn-text-secondary bn-font-normal bn-mb-1">{rtl ? 'To' : 'From'} {chain}</p>
				<p className="bn-text-sm bn-font-medium bn-text-primary bn-flex-nowrap bn-flex bn-space-x-1">
					<span className="bn-block bn-max-w-[60px] bn-text-ellipsis bn-overflow-hidden">{adjustDecimals(amount, 2, locale)}</span>
					<span>{token.symbol}</span>
				</p>
			</div>
		</div>
	);
};
