import { chainColors } from "@components/TokenItem";
import { MIcon } from "@components/common/MIcon";
import { TokenIcon } from "@components/common/TokenIcon";
import { useMappedChainData } from "@hooks/useMappedChainData";
import type { Token } from "../../Providers/ConfigProvider";

export const ImportTokenItem = ({
	token,
	onClick,
	active = false,
}: {
	token: Token;
	onClick: () => void;
	active?: boolean;
}) => {
	if (!token) return null;

	const mappedChainData = useMappedChainData();
	const network = mappedChainData?.[token.chainId];

	return (
		<div className="bn-flex bn-justify-between bn-items-center">
			<div className="bn-flex bn-items-center">
				<div className="bn-size-7 bn-rounded-full bn-relative bn-mr-3">
					<TokenIcon url={token.logoURI} classNames="bn-size-full" />
					{network && (
						<TokenIcon
							url={network?.icon}
							classNames="bn-absolute -bn-bottom-0.5 -bn-right-1 bn-size-[14px]"
						/>
					)}
				</div>
				<div>
					<p className="bn-text-base bn-font-medium bn-text-primary bn-mb-1 bn-leading-[19.2px]">
						{token.name} <span className="bn-text-secondary">{token.symbol}</span>
					</p>
					{/* biome-ignore format: */}
					<p
						className={`${
						chainColors[token.chainId]
						} bn-text-sm bn-font-normal bn-leading-[16.8px]`}
					>
						On {network?.name}
					</p>
				</div>
			</div>

			<AddTokenButton onClick={onClick} active={active} />
		</div>
	);
};

const AddTokenButton = ({
	onClick,
	active,
}: {
	onClick: () => void;
	active: boolean;
}) => {
	// biome-ignore format:
	const style = `bn-font-medium bn-size-[30px] bn-rounded-full bn-flex bn-items-center bn-justify-center bn-border-0 bn-cursor-pointer ${
    active ? "bn-bg-accent bn-text-accent" : "bn-bg-layer-3 bn-text-primary"
  }`;
	return (
		<button type="button" className={style} onClick={onClick}>
			<MIcon name={active ? "check" : "add"} classNames="bn-text-inherit" />
		</button>
	);
};
