import React, { type ReactNode } from "react";

import { adjustDecimals } from "@utils/adjustDecimals";
import type { Token } from "../../Providers/ConfigProvider";
import { useMappedChainData } from "../../hooks/useMappedChainData";
import { twMerge } from "../../utils/tailwindMerge";
import { TokenIcon } from "./TokenIcon";
import { Tooltip } from "./Tooltip";

export const TokenChip = ({
	token,
	onClick,
	active,
	disabled = false,
	showChain,
	classNames,
	big = false,
	amount,
	children,
}: {
	token: Token;
	onClick: () => void;
	active?: boolean;
	disabled?: boolean;
	showChain?: boolean;
	classNames?: string;
	big?: boolean;
	amount?: string;
	children?: ReactNode;
}) => {
	const mappedChainData = useMappedChainData();
	const styles = twMerge(
		// biome-ignore format:
		`bn-p-2 bn-rounded-full bn-flex bn-items-center bn-cursor-pointer bn-bg-layer-2 bn-border-none bn-font-semibold bn-text-primary bn-space-x-1.5 disabled:bn-opacity-20 ${big ? 'bn-text-lg bn-leading-[22px]': 'bn-text-sm'}`,
		classNames,
	);

	// biome-ignore format:
	const tokenStyle = "bn-relative bn-size-5"

	return (
		<button onClick={onClick} className={styles} disabled={disabled} type="button">
			<div className={tokenStyle}>
				<TokenIcon url={token.logoURI} classNames="bn-size-full" />
				{showChain && (
					<TokenIcon
						url={mappedChainData?.[token.chainId]?.icon ?? ""}
						classNames="bn-h-2.5 bn-w-2.5 bn-absolute bn-bottom-0 -bn-right-[2.5px]"
					/>
				)}
			</div>

			<span className="bn-whitespace-nowrap">
				{amount && (
					<Tooltip content={amount} placement="top">
						<span>{adjustDecimals(amount, 3)}</span>
					</Tooltip>
				)}{" "}
				{token.symbol}
			</span>
			{children}
		</button>
	);
};
