import { type JSX, useEffect, useState } from "react";
import { useSelector } from "react-redux";

import { ScreenTab } from "@store/globalSlice";
import type { ReduxStateType } from "@store/types";
import { SolanaBanner } from "./Banners/SolanaBanner";

export const CampaignBanners = () => {
	const screenTab = useSelector(
		(state: ReduxStateType) => state.global.screenTab,
	);

	const [currentBanner, setCurrentBanner] = useState(0);
	const banners: JSX.Element[] = [];

	useEffect(() => {
		if (banners.length === 0) return;
		const interval = setInterval(() => {
			setCurrentBanner((prev) => (prev + 1) % banners.length);
		}, 10000);
		return () => clearInterval(interval);
	}, []);

	if (screenTab !== ScreenTab.HOME) return <></>;

	return banners.length > 0 ? (
		<div className="bn-relative bn-mt-2">
			{banners.length > 1 && (
				<CarouselButtons
					banners={banners}
					currentBanner={currentBanner}
					setCurrentBanner={setCurrentBanner}
				/>
			)}
			<div className="bn-h-[142px]">{banners[currentBanner]}</div>
		</div>
	) : null;
};

const CarouselButtons = ({
	banners,
	currentBanner,
	setCurrentBanner,
}: {
	banners: JSX.Element[];
	currentBanner: number;
	setCurrentBanner: React.Dispatch<React.SetStateAction<number>>;
}) => {
	return (
		<div className="bn-flex bn-items-center bn-justify-center">
			{banners.map((banner, index) => (
				<button
					key={banner.key}
					type="button"
					// biome-ignore format:
					className={`bn-size-2 rounded-full ${
						currentBanner === index ? "bn-bg-theme" : "bn-bg-[#373A3E]"
					} bn-mx-1`}
					onClick={() => setCurrentBanner(index)}
					onKeyUp={(e) => {
						if (e.key === "Enter" || e.key === " ") {
							setCurrentBanner(index);
						}
					}}
					tabIndex={0}
				/>
			))}
		</div>
	);
};
