import { motion } from "framer-motion";

import { Rewards } from "@components/common/Rewards";
import { RoutesWrapper } from "@components/common/RouteItem/RoutesWrapper";
import { useFetchData } from "@hooks/apis/common/useFetchData";
import { resetUserDefaults } from "@hooks/resetUserDefaults";
import { ActionButton } from "../ActionButton";
import { CompareButton } from "../Compare/CompareButton";
import { InputOutputWrap } from "../common/InputOutputWrap";
import { AddOns } from "./AddOn";
import { Header } from "./Header";
import { Input } from "./Input";
import { Output } from "./Output";
import { TokensSwitch } from "./TokensSwitch";
import { RecipientWarning } from "./Warnings/RecipientWarning";
import { SlippageWarning } from "./Warnings/SlippageWarning";

export const Home = () => {
	// To fetch chains & tokens
	useFetchData();

	// To reset defauls
	resetUserDefaults();

	return (
		<motion.div
			initial={{ opacity: 0 }}
			animate={{ opacity: 1 }}
			transition={{ duration: 0.5 }}
		>
			<Header />
			<InputOutputWrap>
				<motion.div
					layout
					className="bn-relative bn-pt-[19px]"
					initial={{ y: 20, opacity: 0 }}
					animate={{ y: 0, opacity: 1 }}
					transition={{ delay: 0.2, duration: 0.3 }}
				>
					<Input />
					<TokensSwitch classNames="bn-absolute bn-left-0 bn-right-0 bn-mx-auto bn-top-[103px] bn-cursor-pointer" />
					<Output />
					<AddOns />
					<Rewards />
				</motion.div>
			</InputOutputWrap>

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

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