import { useDispatch } from "react-redux";

import solanaBg from "@assets/campaigns/solana/solanaBG.png";
import { useOutputTokenSelectorData } from "@components/Home/Output/useOutputTokenSelectorData";
import { setToChainId } from "@store/quoteParamSlice";
import { setTokenSelectorData } from "@store/tokenSelectorSlice";
import { SOLANA_CHAIN_ID } from "@utils/constants";
import { NewCampaignLayout } from "../NewCampaignLayout";
import { campaigns } from "../campaignData";

const solanaChainInfo = {
	chainId: 89999,
	name: "Solana",
	icon: "https://media.socket.tech/networks/solana.svg",
	currency: {
		address: "0xeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeee",
		name: "SOL",
		symbol: "SOL",
		decimals: 9,
		icon: "https://media.socket.tech/tokens/all/SOL",
		minNativeCurrencyForGas: "5000",
	},
	explorers: ["https://explorer.solana.com"],
	sendingEnabled: true,
	receivingEnabled: true,
	isAutoEnabled: false,
	isManualEnabled: true,
};

export const SolanaBanner = () => {
	const dispatch = useDispatch();
	const { data: tokenSelectorData } = useOutputTokenSelectorData();
	const solanaCampaign = campaigns.find((campaign) => campaign.id === "solana");
	if (!solanaCampaign) return <></>;

	const swapNowFn = () => {
		dispatch(setToChainId(SOLANA_CHAIN_ID));

		const solanaSelectorData = {
			...tokenSelectorData,
			data: {
				...tokenSelectorData.data,
				activeChain: solanaChainInfo,
			},
		};
		dispatch(setTokenSelectorData(solanaSelectorData));
	};

	return (
		<NewCampaignLayout campaign={solanaCampaign} swapNowFn={swapNowFn}>
			<img
				src={solanaBg.toString()}
				alt="background"
				className="bn-h-full bn-w-full bn-object-cover bn-object-center bn-absolute bn-top-0 bn-right-0"
			/>
		</NewCampaignLayout>
	);
};
