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

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

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

	const [copiedIcon, showCopiedIcon] = useState<boolean>(false);

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

		// Reset the icon after 3 seconds
		const timer = setTimeout(() => {
			showCopiedIcon(false);
		}, 3000);

		return () => clearTimeout(timer);
	};

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

	return (
		<div>
			<p className="bn-text-secondary bn-text-left bn-font-normal bn-text-[13px] bn-mb-1.5">
				Request Hash:
			</p>
			<div className="bn-flex bn-items-center bn-space-x-1">
				{showIcon && <SocketScanIcon width={18} />}
				<Tooltip content="Open in SocketScan" placement="top">
					<a
						href={socketScanLink}
						target="_blank"
						className="bn-text-primary bn-font-medium bn-text-[15px] bn-text-left bn-aeonik-font bn-no-underline hover:bn-underline"
						rel="noreferrer"
					>
						{shortenAddress(id)}
					</a>
				</Tooltip>
				<button
					type="button"
					onClick={(e) => {
						handleCopy();
						e.stopPropagation();
					}}
					className="bn-border-none bn-bg-transparent bn-cursor-pointer bn-p-0 bn-size-4"
				>
					{copiedIcon ? (
						<MIcon name="task_alt" classNames="bn-text-success bn-text-base" />
					) : (
						<MIcon name="content_copy" classNames="bn-text-primary bn-text-base" />
					)}
				</button>
			</div>
		</div>
	);
};
