import React from "react";

import { CheckMark } from "@components/common/Icons";
import { TokenIcon } from "@components/common/TokenIcon";
import { useMappedChainData } from "@hooks/useMappedChainData";
import type { Token } from "../../Providers/ConfigProvider";
import { TokenAddress } from "./TokenAddress";
import { TokenBalance } from "./TokenBalance";
import { TokenTags } from "./TokenTags";

export const chainColors: Record<number, string> = {
	1: "bn-text-[#8FA6FF]",
	10: "bn-text-[#FF9494]",
	56: "bn-text-[#FFD447]",
	100: "bn-text-[#65FFD7]",
	137: "bn-text-[#BF99FF]",
	324: "bn-text-[#9898E2]",
	1101: "bn-text-[#D8A1E8]",
	5000: "bn-text-[#CCE9E7]",
	8453: "bn-text-[#99B9FF]",
	34443: "bn-text-[#D7FF01]",
	42161: "bn-text-[#9BD7FF]",
	43114: "bn-text-[#F5898A]",
	59144: "bn-text-[#61DFFF]",
	81457: "bn-text-[#FFFF61]",
	534352: "bn-text-[#FFDBB0]",
	7777777: "bn-text-secondary",
	1313161554: "bn-text-[#96FF70]",
};

export const TokenItem = ({
	onClick,
	token,
	chainName,
	showChainIcon = false,
	active = false,
	disabled = false,
}: {
	onClick: () => void;
	token: Token;
	chainName?: string;
	showChainIcon?: boolean;
	active?: boolean;
	disabled?: boolean;
}) => {
	const mappedChainData = useMappedChainData();

	// biome-ignore format:
	const subTextStyle = `bn-text-sm bn-font-normal bn-flex-wrap bn-leading-[16.8px] bn-mt-0.5 bn-flex bn-items-center ${chainName ? chainColors[token.chainId] : 'bn-text-secondary'}`

	return (
		<button
			onClick={onClick}
			type="button"
			className={`bn-py-2 bn-flex bn-items-center bn-justify-between bn-cursor-pointer bn-w-full hover:bn-bg-layer-2 bn-px-4 bn-border-none bn-group disabled:bn-opacity-20 ${active ? 'bn-bg-layer-2' : 'bn-bg-transparent'}`}
			disabled={disabled}
		>
			<div className="bn-flex bn-items-center">
				{/* Token Icon */}
				<div className="bn-h-7 bn-w-7 bn-relative">
					<TokenIcon url={token.logoURI} classNames="bn-h-full bn-w-full" />
					{showChainIcon && (
						<TokenIcon
							url={mappedChainData?.[token.chainId]?.icon ?? ""}
							classNames="bn-h-[14px] bn-w-[14px] bn-absolute bn-bottom-0 -bn-right-[2.5px]"
						/>
					)}
				</div>

				{/* Token Info */}
				<div className="bn-flex bn-flex-col bn-items-start bn-ml-3">
					<div className="bn-flex bn-items-center bn-space-x-1">
						<span className="bn-text-primary bn-font-medium bn-text-base bn-leading-[19.2px] bn-text-left bn-flex bn-items-center">
							{token.symbol} <TokenTags token={token} />
						</span>
						{active && <CheckMark />}
					</div>
					<div className={subTextStyle}>
						<span>{chainName ?? token.name}</span>

						<TokenAddress address={token.address} chainId={token.chainId} />
					</div>
				</div>
			</div>

			<TokenBalance token={token} />
		</button>
	);
};
