// @note: This is a temporary hook. Will be replaced by useOutputTokenSelectorData
// when multi-output is fully functional

import { useSelector } from "react-redux";

import { useMappedChainData } from "@hooks/useMappedChainData";
import { useSupportedChains } from "@hooks/useSupportedChains";
import { useSupportedTokens } from "@hooks/useSupportedTokens";
import type { Token } from "@providers/ConfigProvider";
import type { MultiTokenParams } from "@store/multiTokenModalSlice";
import type { ReduxStateType } from "@store/types";
import { NATIVE_TOKEN_ADDRESS } from "@utils/constants";
import { useMemo } from "react";

/** Token Selector Data for Multi Token Modal - for Native */
export const useOutputNativeTokenSelectorData = () => {
	const mappedChainData = useMappedChainData();
	const { supportedChains: chains } = useSupportedChains({ input: false });
	const tokens = useSupportedTokens({ input: false });

	const activeChainId = useSelector(
		(state: ReduxStateType) => state.quoteParams.toChainId,
	);
	const activeChain = mappedChainData?.[activeChainId ?? 10];

	const activeTokens = useSelector(
		(state: ReduxStateType) => state.quoteParams.toTokens,
	);

	const nativeToken = useMemo(() => {
		if (activeChainId) {
			return tokens?.[activeChainId]?.filter(
				(token) => token.address.toLowerCase() === NATIVE_TOKEN_ADDRESS,
			)?.[0];
		}

		return {} as Token;
	}, [activeChainId, tokens]);

	const data: MultiTokenParams = useMemo(() => {
		return {
			isVisible: true,
			data: {
				id: 1,
				isSource: false,
				activeChain,
				defaultToken: nativeToken,
				otherTokens: [activeTokens?.[0]],
			},
		};
	}, [activeChain, nativeToken, activeTokens]);

	return { data: data, isLoading: !tokens || !chains };
};
