import { useBreakpoints } from "../styles/breakpoints.js";
import { Icon } from "./Icon/Icon.js";
import { useClipboard } from "../hooks/useClipboard.js";
import { UnstyledButton } from "./UnstyledButton.js";
import { InputSubtext, inputBlockStyle } from "../styles/fields.js";
import { Pill } from "./Pill.js";
import { TextInput } from "./TextInput.js";
import styled from "@emotion/styled";
import { Fragment, useCallback, useEffect, useRef, useState } from "react";
import { jsx, jsxs } from "@emotion/react/jsx-runtime";
//#region src/components/ReadClipboardButton.tsx
function ReadClipboardButton({ onChangeTextInput = () => {}, onPasteValue, onRemoveValue, valueLoading = false, value, errorMsg, description, autoButtonText, onClickAutoButton, hint, clipboardCallbacks }) {
	const bp = useBreakpoints();
	const { canReadFromClipboard, readTextFromClipboard } = useClipboard(clipboardCallbacks);
	const [isEditingTextInput, setIsEditingTextInput] = useState(false);
	const isDeleting = useRef(false);
	const getTextFromClipboard = useCallback(async () => {
		const text = await readTextFromClipboard();
		if (text !== null) {
			const value = text.trim();
			if (value === "") setIsEditingTextInput(true);
			else onPasteValue(value);
		}
	}, [onPasteValue, readTextFromClipboard]);
	function onClick() {
		if (!isDeleting.current) getTextFromClipboard();
		else isDeleting.current = false;
	}
	function onDeleteMouseDown(e) {
		e.stopPropagation();
		isDeleting.current = true;
		onRemoveValue();
	}
	function onDeleteMouseUp() {
		isDeleting.current = false;
	}
	const onKeyDown = useCallback((event) => {
		const charCode = String.fromCharCode(event.which).toLowerCase();
		if (document.activeElement === document.body) {
			if (canReadFromClipboard) {
				if ((event.ctrlKey || event.metaKey) && charCode === "v") {
					event.preventDefault();
					getTextFromClipboard();
					return;
				}
			}
			if (event.key === "Escape" || event.key === "Delete") onRemoveValue();
			else if (charCode.match(/^[a-z0-9]$/i)) setIsEditingTextInput(true);
		}
	}, [
		getTextFromClipboard,
		canReadFromClipboard,
		onRemoveValue
	]);
	useEffect(() => {
		document.addEventListener("keydown", onKeyDown);
		return () => {
			document.removeEventListener("keydown", onKeyDown);
		};
	}, [onKeyDown]);
	return (canReadFromClipboard || onClickAutoButton) && !bp.isSm() ? /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(ReadClipboardButtonContainer, {
		onClick: onClickAutoButton ? onClickAutoButton : onClick,
		hasAddress: Boolean(value),
		hasError: Boolean(errorMsg),
		onMouseUp: onDeleteMouseUp,
		children: autoButtonText ? /* @__PURE__ */ jsx(UnstyledButton, {
			onClick: onClickAutoButton,
			css: { cursor: "pointer" },
			children: /* @__PURE__ */ jsx(Pill, {
				text: autoButtonText,
				icon: "MagicWand",
				cursor: "pointer",
				loading: valueLoading,
				onClickPillBody: onClickAutoButton
			})
		}) : /* @__PURE__ */ jsxs(Fragment, { children: [!value && !isEditingTextInput ? /* @__PURE__ */ jsxs(UnstyledButton, {
			onClick,
			children: [/* @__PURE__ */ jsx(Icon, {
				name: "Copy",
				width: 19
			}), /* @__PURE__ */ jsx("div", {
				css: { marginTop: "8px" },
				children: description
			})]
		}) : null, value || isEditingTextInput ? /* @__PURE__ */ jsx(Pill, {
			text: value,
			onDeleteMouseDown,
			loading: valueLoading,
			isEditing: isEditingTextInput,
			onChangeTextInput: (value) => {
				onChangeTextInput(value);
			},
			onFocusTextInput: () => setIsEditingTextInput(true),
			onBlurTextInput: () => setIsEditingTextInput(false),
			onClickPillBody: onClickAutoButton ? onClickAutoButton : () => setIsEditingTextInput(true)
		}) : null] })
	}), /* @__PURE__ */ jsx(InputSubtext, {
		text: errorMsg || hint,
		hasError: Boolean(errorMsg)
	})] }) : /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsx(TextInput, {
		onChange: onChangeTextInput,
		value,
		hint,
		error: errorMsg || void 0
	}) });
}
const ReadClipboardButtonContainer = styled.div`
  ${({ theme, hasAddress, hasError }) => inputBlockStyle({
	theme,
	hasValue: hasAddress,
	hasError
})}
`;
//#endregion
export { ReadClipboardButton };
