import { useState } from "react";
import { useDispatch } from "react-redux";

import { Button } from "@components/common/Button";
import { SquaredCheckbox } from "@components/common/SquaredCheckbox";
import { useToast } from "@providers/ToastProvider";
import { importToken } from "@store/globalSlice";
import {
	addOutputToken,
	setFromChainId,
	setFromTokens,
	setToChainId,
} from "@store/quoteParamSlice";
import { setTokenSelectorData } from "@store/tokenSelectorSlice";
import type { Token } from "../../Providers/ConfigProvider";
import { ImportTokenItem } from "./ImportTokenItem";

export const ImportToken = ({
	tokens,
	closePanel,
	isSourceTokenSelector,
}: {
	tokens: Token[];
	closePanel: () => void;
	isSourceTokenSelector: boolean;
}) => {
	const [selectedTokens, setSelectedToken] = useState<Token[]>([]);
	const [isDisclaimerChecked, setIsDisclaimerChecked] = useState<boolean>(false);
	const { showToast } = useToast();

	const dispatch = useDispatch();

	function dispatchImportedToken(tokens: Token[]) {
		// Adding tokens to the localStorage
		for(const _token of tokens){
			dispatch(importToken({ token: _token }));
		}

		const firstToken = tokens?.[0];

		// Adding the token to source/dest & closing the panels
		if (isSourceTokenSelector) {
			dispatch(setFromTokens(firstToken));
			dispatch(setFromChainId(firstToken.chainId));
		} else {
			dispatch(addOutputToken({ id: 0, token: firstToken }));
			dispatch(setToChainId(firstToken.chainId));
		}

		closePanel();
		dispatch(setTokenSelectorData({ isVisible: false }));
		// // biome-ignore format:
		showToast("Token Imported Successfully", `${firstToken.symbol} has been added to your local storage`)
	}

	const handleClick = (token: Token) => {
		const tokensCopy = selectedTokens.slice();
		const isActive = tokensCopy?.some((value) => value.chainId === token.chainId);

		if(isActive){
			const index = tokensCopy.indexOf(token);
			tokensCopy.splice(index, 1);
		} else{
			tokensCopy.push(token);
		}

		setSelectedToken(tokensCopy);
	};

	return (
		<div className="bn-p-4 bn-flex bn-flex-col bn-justify-between bn-h-full">
			<div className="bn-space-y-4 bn-flex-1 bn-overflow-auto">
				{tokens?.map((token) => {
					const _active = selectedTokens.some(
						(selectedToken) => selectedToken.chainId === token.chainId,
					);

					return (
						<ImportTokenItem
							token={token}
							key={token.chainId}
							onClick={() => handleClick(token)}
							active={Boolean(_active)}
						/>
					);
				})}
			</div>

			<div>
				<div className="bn-flex bn-items-center bn-space-x-1.5 bn-mb-3 bn-mt-2">
					<SquaredCheckbox
						id="bungee-token-import-disclaimer"
						active={isDisclaimerChecked}
						setActive={setIsDisclaimerChecked}
						classNames="bn-border-[3px] bn-border-[#35373C]"
					/>
					<p className="bn-text-secondary bn-font-normal bn-text-sm">
						This token address is correct. By importing this token, I know and accept the
						risks.
					</p>
				</div>

				<Button
					label="Import Tokens"
					onClick={() => dispatchImportedToken(selectedTokens)}
					disabled={!(selectedTokens?.length > 0 && isDisclaimerChecked)}
				/>
			</div>
		</div>
	);
};
