import { useDispatch } from "react-redux";

import asterBg from "@assets/campaigns/aster/bg.svg";
import { useSupportedTokens } from "@hooks/useSupportedTokens";
import { addOutputToken, setToChainId } from "@store/quoteParamSlice";
import { resolveSvg } from "@utils/resolveSvg";
import { NewCampaignLayout } from "../NewCampaignLayout";
import { campaigns } from "../campaignData";

export const AsterBanner = () => {
	const dispatch = useDispatch();
	const asterCampaign = campaigns.find(
		(campaign) => campaign.id === "aster-campaign",
	);

	const tokens = useSupportedTokens({ input: true });

	const bnbTokens = tokens?.[56];
	const asterToken = bnbTokens?.filter(
		(token) =>
			token.address.toLowerCase() ===
			"0x000ae314e2a2172a039b26378814c252734f556a".toLowerCase(),
	)?.[0];

	const swapNowFn = () => {
		if (!asterCampaign || !asterToken) return;
		dispatch(setToChainId(asterCampaign.chainId));
		dispatch(addOutputToken({ id: 0, token: asterToken }));
	};

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

	return (
		<NewCampaignLayout campaign={asterCampaign} swapNowFn={swapNowFn}>
			<img
				src={resolveSvg(asterBg)}
				alt="background"
				className="bn-absolute !-bn-top-[18px] bn-right-0 bn-size-[112px]"
			/>
		</NewCampaignLayout>
	);
};
