import { useCopyToClipboard } from "@uidotdev/usehooks";
import { useEffect, useRef, useState } from "react";

import { SocketScanIcon } from "@components/common/Icons";
import { MIcon } from "@components/common/MIcon";
import { Tooltip } from "@components/common/Tooltip";
import { useExplorerLink } from "@hooks/useExplorerLink";
import { useSocketScanLink } from "@hooks/useSocketScanLink";
import { shortenAddress } from "@utils/shortenAddress";

export const OrderId = ({
	id,
	chainId,
	openChainExplorer = false,
	showIcon = true,
}: {
	id: string;
	chainId: number;
	showIcon?: boolean;
	openChainExplorer?: boolean;
}) => {
	const [copiedText, copyToClipboard] = useCopyToClipboard();

	const [copiedIcon, showCopiedIcon] = useState<boolean>(false);
	const timerRef = useRef<number | null>(null);

	const handleCopy = () => {
		copyToClipboard(id);
		showCopiedIcon(true);

		// Clear any existing timer
		if (timerRef.current) {
			clearTimeout(timerRef.current);
		}

		// Reset the icon after 3 seconds
		timerRef.current = setTimeout(() => {
			showCopiedIcon(false);
			timerRef.current = null;
		}, 3000);
	};

	const { socketScanLink } = useSocketScanLink({ txHash: id, type: "tx" });
	const explorerLink = useExplorerLink({ txHash: id, chainId });

	// Clean up timer on unmount
	useEffect(() => {
		return () => {
			if (timerRef.current) {
				clearTimeout(timerRef.current);
			}
		};
	}, []);

	return (
		<div>
			<p className="bn-text-secondary bn-text-left bn-font-normal bn-text-[13px] bn-mb-1.5">
				Request Hash:
			</p>
			{id ? (
				<div className="bn-flex bn-items-center bn-space-x-1">
					{showIcon && <SocketScanIcon width={18} />}
					<Tooltip
						content={
							openChainExplorer
								? "Open in chain explorer"
								: "Open in SocketScan"
						}
						placement="top"
					>
						<a
							href={openChainExplorer ? explorerLink : socketScanLink}
							target="_blank"
							className="bn-text-primary bn-font-medium bn-text-[15px] bn-text-left bn-aeonik-font bn-flex bn-items-center bn-space-x-1"
							rel="noreferrer"
						>
							<span>{shortenAddress(id)}</span>
							<MIcon name="open_in_new" classNames="bn-text-base" />
						</a>
					</Tooltip>
					<Tooltip
						content={copiedIcon ? "Copied!" : "Copy request hash"}
						placement="top"
					>
						<button
							type="button"
							onClick={(e) => {
								handleCopy();
								e.stopPropagation();
							}}
							className="bn-flex bn-size-4 bn-cursor-pointer bn-items-center bn-justify-center bn-border-none bn-bg-transparent bn-p-0"
						>
							{copiedIcon ? (
								<MIcon
									name="task_alt"
									classNames="bn-text-[#8AE8B6] bn-text-sm"
								/>
							) : (
								<MIcon
									name="content_copy"
									classNames="bn-text-primary bn-text-sm"
								/>
							)}
						</button>
					</Tooltip>
				</div>
			) : (
				<div className="bn-w-[120px] bn-h-[22.5px] bn-rounded-full bn-bg-layer-3 bn-animate-pulse bn-block">
					&nbsp;
				</div>
			)}
		</div>
	);
};
