import { useDispatch } from "react-redux";

import { Ellipses } from "@assets/graphics/Ellipses";
import { useSupportedTokens } from "@hooks/useSupportedTokens";
import { addOutputToken, setToChainId } from "@store/quoteParamSlice";
import { type Campaign, campaigns } from "../campaignData";
import { CampaignLayout } from "../layout";

export const SonicBanner = () => {
	const dispatch = useDispatch();
	const sonicCampaign = campaigns.find((campaign) => campaign.id === "sonic");
	const tokens = useSupportedTokens({ input: true });
	const sonicTokens = tokens?.[146];
	const scUSD = sonicTokens?.filter(
		(token) =>
			token.address.toLowerCase() ===
			"0xd3dce716f3ef535c5ff8d041c1a41c3bd89b97ae".toLowerCase(),
	)?.[0];

	if (!sonicCampaign) return <></>;

	const updatedSonicCampaign: Campaign = {
		...sonicCampaign,
		btnClick: () => {
			if (scUSD) {
				dispatch(addOutputToken({ id: 0, token: scUSD }));
				dispatch(setToChainId(146));
			}
		},
	};

	return (
		<CampaignLayout campaign={updatedSonicCampaign}>
			<img
				src="https://media.socket.tech/networks/sonic.svg"
				alt="sonic icon"
				className="bn-size-[56px] bn-rounded-full bn-border-[5px] bn-border-solid bn-border-white/15 bn-relative bn-z-10"
			/>
			<div className="bn-absolute bn-right-0 bn-bottom-0 bn-top-0 bn-w-fit bn-h-full">
				<Ellipses />
			</div>
		</CampaignLayout>
	);
};
