import { useEffect, useState } from "react";

import type { Token } from "@/types/index";
import { MIcon } from "@components/common/MIcon";
import { TokenIcon } from "@components/common/TokenIcon";
import { useMappedChainData } from "@hooks/useMappedChainData";

export const ApprovalModalLayout = ({
	token,
	subtext,
	closePanel,
	permit2Approval = false,
}: {
	token: Token;
	subtext?: string;
	closePanel: () => void;
	permit2Approval?: boolean;
}) => {
	const mappedChainData = useMappedChainData();
	const chain = mappedChainData?.[token.chainId];

	const [showButton, setShowButton] = useState(false);

	useEffect(() => {
		const timeoutId = setTimeout(() => {
			setShowButton(true);
		}, 8000);

		return () => clearTimeout(timeoutId);
	}, []);

	const style =
		"bn-text-sm bn-font-normal bn-text-accent-1 bn-mt-4 bn-w-full bn-text-center bn-flex bn-items-center bn-no-underline bn-justify-center";

	return (
		<>
			<div className="bn-relative bn-h-[56px] bn-w-[56px] bn-mx-auto bn-mb-4">
				<div className="bn-absolute bn-size-full bn-animate-ping bn-rounded-full bn-left-0 bn-top-0 bn-bg-layer-3" />
				<TokenIcon url={token.logoURI} classNames="bn-h-full bn-w-full" />

				{chain?.icon && (
					<TokenIcon
						url={chain.icon}
						classNames="bn-w-7 bn-h-7 bn-absolute bn-bottom-0 -bn-right-2"
					/>
				)}
			</div>

			<div className="bn-mb-4">
				<p className="bn-text-center bn-text-primary bn-font-medium bn-text-xl bn-mb-1">
					Approving {token.symbol} on {chain?.name}
				</p>
				<p className="bn-text-secondary bn-font-normal bn-text-sm bn-text-center">
					{/* {subtext ? "Approve this token once and trade gasless with just your signature." : ""} */}
					{subtext || "Confirm token approval in your wallet"}
				</p>
			</div>

			{showButton ? (
				<button
					type="button"
					onClick={closePanel}
					className={style}
					style={{ textDecoration: "underline" }}
				>
					Close this modal if not redirected
				</button>
			) : permit2Approval ? (
				<a
					href="https://docs.bungee.exchange/overview/routing-methods/permit2"
					target="_blank"
					className={style}
					rel="noreferrer"
					id="permit2-doc-link"
				>
					Learn how Bungee uses Permit2 Signatures{" "}
					<MIcon name="open_in_new" classNames="bn-text-base bn-ml-1" />
				</a>
			) : null}
		</>
	);
};
