import { motion } from "framer-motion";
import React from "react";

import { useFetchData } from "@hooks/apis/useFetchData";
import { resetUserDefaults } from "@hooks/resetUserDefaults";
import { ActionButton } from "../ActionButton";
import { ReviewDropdown } from "../ReviewDropdown";
import { InputOutputWrap } from "../common/InputOutputWrap";
import { BestPrice } from "./BestPrice";
import { Header } from "./Header";
import { Input } from "./Input";
import { Output } from "./Output";
import { TokensSwitch } from "./TokensSwitch";

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-py-[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 />
				</motion.div>
				<motion.div
					initial={{ opacity: 0 }}
					animate={{ opacity: 1 }}
					transition={{ delay: 0.4, duration: 0.3 }}
				>
					<BestPrice />
				</motion.div>
			</InputOutputWrap>
			<motion.div
				initial={{ y: 10, opacity: 0 }}
				animate={{ y: 0, opacity: 1 }}
				transition={{ delay: 0.4, duration: 0.3 }}
			>
				<ReviewDropdown />
				<ActionButton />
			</motion.div>
		</motion.div>
	);
};
