import React from "react";
import { useDispatch, useSelector } from "react-redux";
import { toggleRecipientModal } from "../../store/globalSlice";
import type { ReduxStateType } from "../../store/types";
import { shortenAddress } from "../../utils/shortenAddress";
import { MIcon } from "./MIcon";

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

	const isReceiverAdded = receiver?.toLowerCase() !== sender?.toLowerCase();

	if (isReceiverAdded && receiver) {
		return (
			<div className="bn-flex bn-items-center bn-text-sm bn-font-medium bn-text-primary">
				{receiverEns || shortenAddress(receiver)}

				<button
					className="bn-ml-1.5 bn-bg-transparent bn-p-0 bn-border-0 bn-size-4 bn-cursor-pointer"
					type="button"
					onClick={openRecipientModal}
				>
					<MIcon name="edit" classNames="bn-text-accent bn-text-base" />
				</button>
			</div>
		);
	}
	return (
		<button
			type="button"
			className="bn-text-accent bn-font-semibold bn-text-sm bn-bg-transparent bn-p-0 bn-border-0 bn-cursor-pointer bn-flex bn-items-center"
			onClick={openRecipientModal}
		>
			<MIcon name="wallet" classNames="bn-text-xl" />
			<span className="bn-pl-1">Add Address</span>
		</button>
	);
};
