import { useDispatch, useSelector } from "react-redux";

import { MIcon } from "@components/common/MIcon";
import { RoundedCheckbox } from "@components/common/RoundedCheckbox";
import { Tooltip } from "@components/common/Tooltip";
import { useActiveRoute } from "@hooks/apis/common/quote/useActiveRoute";
import { useGasBalanceCheck } from "@hooks/useGasBalanceCheck";
import { useMappedChainData } from "@hooks/useMappedChainData";
import { useSupportedTokens } from "@hooks/useSupportedTokens";
import { toggleAddOnRefuel } from "@store/quoteParamSlice";
import type { ReduxStateType } from "@store/types";
import { adjustDecimals } from "@utils/adjustDecimals";
import { formatValue } from "@utils/formatValue";

export const Refuel = () => {
	const { data: activeRoute } = useActiveRoute();
	const { toChainId } = useSelector(
		(state: ReduxStateType) => state.quoteParams,
	);
	const mappedChainData = useMappedChainData();

	const { gasRequired, shouldDisableRefuel } = useGasBalanceCheck();
	const supportedTokens = useSupportedTokens({ input: false });

	const getTitle = () => {
		if (activeRoute?.refuel) return "Enabled Refuel";
		return "Enable Refuel";
	};

	const refuelRequiredButNotEnabled =
		gasRequired && !activeRoute?.refuel?.output?.token;

	const getDescription = () => {
		const _refuel = activeRoute?.refuel;
		if (_refuel?.output?.token && _refuel.output.amount) {
			const formattedAmount = formatValue(
				_refuel.output.amount,
				_refuel.output.token.decimals,
			);
			return `You'll get ${adjustDecimals({ value: formattedAmount, decimals: 4 })} ${_refuel.output.token.symbol}`;
		}
		if (gasRequired) return "You are low on gas";
		const chainName = mappedChainData?.[toChainId ?? 0]?.name ?? "";
		if (chainName) return `Get gas on ${chainName}`;
		return "Get gas on destination chain";
	};

	// disable refuel only once the supported tokens are loaded
	if (
		supportedTokens &&
		Object.keys(supportedTokens).length > 0 &&
		shouldDisableRefuel &&
		!activeRoute?.refuel?.output?.token
	) {
		return null;
	}

	return (
		<div className="bn-flex bn-items-center bn-text-sm bn-font-medium bn-bg-layer-3 -bn-mx-4 -bn-mb-4 bn-justify-between bn-px-4 bn-py-2">
			<div className="bn-flex bn-items-center">
				<MIcon
					name="local_gas_station"
					classNames={`bn-text-xl bn-mr-1 ${refuelRequiredButNotEnabled ? "bn-text-accent-4" : "bn-text-theme"}`}
				/>
				<Tooltip
					content="Get a small amount of the native gas token on the destination chain"
					underline
				>
					<span className="bn-font-medium bn-text-primary bn-mr-1">
						{getTitle()}:
					</span>
				</Tooltip>
				<span
					className={`${refuelRequiredButNotEnabled ? "bn-text-accent-4" : "bn-text-secondary"}`}
				>
					{getDescription()}
				</span>
			</div>
			<RefuelCheckbox />
		</div>
	);
};

export const RefuelCheckbox = () => {
	const dispatch = useDispatch();
	const { addOnRefuel } = useSelector(
		(state: ReduxStateType) => state.quoteParams,
	);

	const handleToggle = () => {
		dispatch(toggleAddOnRefuel(!addOnRefuel));
	};

	return (
		<RoundedCheckbox
			isChecked={Boolean(addOnRefuel)}
			setIsChecked={handleToggle}
			id="refuel"
		/>
	);
};
