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

import { MIcon } from "@components/common/MIcon";
import { useActiveRoute } from "@hooks/apis/common/quote/useActiveRoute";
import { toggleRecipientModal } from "@store/globalSlice";
import { setReceiverAddress } from "@store/quoteParamSlice";
import type { ReduxStateType } from "@store/types";
import { isWrapUnwrapCase } from "@utils/isWrapUnwrapCase";
import { shortenAddress } from "@utils/shortenAddress";
import { AddOnItem } from "./AddOnItem";

export const RecipientAddress = () => {
	const dispatch = useDispatch();
	const { data: activeRoute } = useActiveRoute();
	const { receiver, sender, receiverENS } = useSelector(
		(state: ReduxStateType) => state.quoteParams,
	);
	const openRecipientModal = () => {
		dispatch(toggleRecipientModal(true));
	};

	const isReceiverAdded = Boolean(
		receiver && receiver?.toLowerCase() !== sender?.toLowerCase(),
	);
	const label =
		isReceiverAdded && receiver
			? receiverENS || shortenAddress(receiver)
			: "Receiver Address";

	// biome-ignore format:
	const actionItemStyle = `bn-text-[20px] ${isReceiverAdded ? "bn-text-accent" : "bn-text-secondary"}`

	// biome-ignore format:
	const actionItemIconName = isReceiverAdded ? "edit" : "add_circle"

	const disableRecipientAddress = isWrapUnwrapCase(activeRoute);

	useEffect(() => {
		if (disableRecipientAddress) {
			dispatch(setReceiverAddress(""));
		}
	}, [disableRecipientAddress, dispatch]);

	return (
		<AddOnItem
			label={label}
			iconName="wallet"
			active={isReceiverAdded}
			actionItem={<MIcon classNames={actionItemStyle} name={actionItemIconName} />}
			onClick={disableRecipientAddress ? undefined : openRecipientModal}
			disabled={Boolean(disableRecipientAddress)}
		/>
	);
};
