import { motion } from "framer-motion";

import { ActionButton } from "@components/ActionButton";
import { CustomAddressWarning } from "@components/ActionButton/CustomAddressWarning";
import { SlowRouteWarning } from "@components/ActionButton/SlowRouteWarning";
import { CompareButton } from "@components/Compare/CompareButton";
import { InputOutputWrap } from "@components/common/InputOutputWrap";
import { RoutesWrapper } from "@components/common/RouteItem/RoutesWrapper";
import { RouteModeNotification } from "@components/common/RouteModeNotification";
import { useFetchData } from "@hooks/apis/common/useFetchData";
import { useResetUserDefaults } from "@hooks/resetUserDefaults";
import { setIsFetchingDisabled } from "@store/quoteParamSlice";
import { useEffect } from "react";
import { useDispatch } from "react-redux";
import { Header } from "./Header";
import { Input } from "./Input";
import { Output } from "./Output";
import { RewardDisplay } from "./RewardDisplay";
import { TokensSwitch } from "./TokensSwitch";
import WalletSelector from "./WalletSelector";
import { RecipientWarning } from "./Warnings/RecipientWarning";
import { SlippageWarning } from "./Warnings/SlippageWarning";

export const Home = () => {
	const dispatch = useDispatch();

	// To fetch chains & tokens
	useFetchData();

	// To reset defauls
	useResetUserDefaults();

	// biome-ignore lint/correctness/useExhaustiveDependencies: tracking `dispatch` is redundant for this effect
	useEffect(() => {
		// Always re-enable fetching when the component is mounted
		dispatch(setIsFetchingDisabled(false));
	}, []);

	return (
		<motion.div
			initial={{ opacity: 0 }}
			animate={{ opacity: 1 }}
			transition={{ duration: 0.5 }}
		>
			<Header />

			<motion.div
				layout
				initial={{ y: 20, opacity: 0 }}
				animate={{ y: 0, opacity: 1 }}
				transition={{ delay: 0.2, duration: 0.3 }}
				className="bn-mt-2"
			>
				<div className="bn-flex bn-flex-col bn-gap-1 bn-relative">
					<InputOutputWrap>
						<WalletSelector type="input" />
						<Input />
					</InputOutputWrap>

					<div className="bn-relative -bn-mt-[18px] bn-p-1 bn-mx-auto bn-rounded-full bn-z-[1] bn-bg-layer-1 bn-size-fit">
						<TokensSwitch className=" bn-cursor-pointer" />
					</div>

					<InputOutputWrap classNames="-bn-mt-[24px]">
						<WalletSelector type="output" />
						<Output />
						<RewardDisplay label="This swap is eligible for $2k in leaderboard rewards." />
					</InputOutputWrap>
				</div>
			</motion.div>

			<motion.div
				initial={{ y: 10, opacity: 0 }}
				animate={{ y: 0, opacity: 1 }}
				transition={{ delay: 0.4, duration: 0.3 }}
			>
				<RouteModeNotification />
				<RoutesWrapper />
				<CompareButton />

				{/* Warnings */}
				<SlowRouteWarning />
				<CustomAddressWarning />

				<ActionButton />

				{/* warnings */}
				<div className="bn-space-y-2">
					<SlippageWarning />
					<RecipientWarning />
				</div>
			</motion.div>
		</motion.div>
	);
};
