Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
const require_chunk = require("../chunk-BN4qSVkS.cjs");
const require_styles_colors = require("../styles/colors.cjs");
const require_styles_common = require("../styles/common.cjs");
const require_components_Icon_Icon = require("./Icon/Icon.cjs");
const require_styles_utils = require("../styles/utils.cjs");
const require_styles_z_index = require("../styles/z-index.cjs");
const require_components_UnstyledButton = require("./UnstyledButton.cjs");
const require_components_Button = require("./Button.cjs");
const require_styles_fields = require("../styles/fields.cjs");
const require_components_QRReader_QRReader = require("./QRReader/QRReader.cjs");
let _emotion_styled = require("@emotion/styled");
_emotion_styled = require_chunk.__toESM(_emotion_styled);
let react = require("react");
let _emotion_react_jsx_runtime = require("@emotion/react/jsx-runtime");
let _lightsparkdev_core = require("@lightsparkdev/core");
let react_dom = require("react-dom");
react_dom = require_chunk.__toESM(react_dom);
//#region src/components/QRReaderButton.tsx
const containerStyle = {};
const videoContainerStyle = {
	position: "static",
	width: "auto",
	height: "auto",
	overflow: "initial"
};
const videoStyle = {};
function QRReaderOverlay({ captureModeTitle, onClickBack }) {
	return /* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsxs)(StyledQRReaderOverlay, { children: [/* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsxs)(ScreenContext, { children: [
		/* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsxs)(OverlayHeader, { children: [/* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsx)(BackButton, {
			onClick: onClickBack,
			children: /* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsx)(require_components_Icon_Icon.Icon, {
				name: "ArrowLeft",
				width: 25
			})
		}), captureModeTitle ? /* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsx)("div", { children: captureModeTitle }) : null] }),
		/* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsx)("div", {
			css: {
				position: "absolute",
				width: "146px",
				top: "13%",
				left: "0px",
				right: "0px",
				margin: "auto"
			},
			children: "Scan a BTC or Lightning QR code"
		}),
		/* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsxs)(OverlayFooter, { children: [/* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsx)("div", { children: "or" }), /* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsx)(require_components_Button.Button, {
			text: "Enter an address",
			onClick: onClickBack,
			mt: 12
		})] })
	] }), /* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsxs)("svg", {
		height: "100%",
		viewBox: "0 0 1784 623",
		fill: "none",
		xmlns: "http://www.w3.org/2000/svg",
		children: [/* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsx)("path", {
			fillRule: "evenodd",
			clipRule: "evenodd",
			d: "M1784 0H0V623H1784V0ZM774.107 136C756.375 136 742 150.327 742 168V404C742 421.673 756.375 436 774.107 436H1009.89C1027.63 436 1042 421.673 1042 404V168C1042 150.327 1027.63 136 1009.89 136H774.107Z",
			fill: "black",
			fillOpacity: "0.5"
		}), /* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsx)("rect", {
			x: "742",
			y: "136",
			width: "300",
			height: "300",
			rx: "32",
			stroke: "white",
			strokeWidth: "2",
			strokeLinecap: "round",
			strokeDasharray: "4 6"
		})]
	})] });
}
function QRReaderButton({ onResult, onUserDenyAccess, captureModeTitle }) {
	const [capturing, setCapturing] = (0, react.useState)(false);
	const [errorMsg, setErrorMsg] = (0, react.useState)(null);
	const nodeRef = (0, react.useRef)(null);
	(0, react.useEffect)(() => {
		if (!nodeRef.current) {
			nodeRef.current = document.createElement("div");
			document.body.appendChild(nodeRef.current);
		}
		return () => {
			if (nodeRef.current) {
				document.body.removeChild(nodeRef.current);
				nodeRef.current = null;
			}
		};
	}, []);
	(0, react.useEffect)(() => {
		if (capturing) {
			document.body.style.overflow = "hidden";
			document.body.style.overscrollBehavior = "none";
			document.body.style.touchAction = "none";
		} else {
			document.body.style.overflow = "";
			document.body.style.overscrollBehavior = "";
			document.body.style.touchAction = "";
		}
	}, [capturing]);
	return /* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsxs)(QRReaderButtonContainer, { children: [
		capturing && nodeRef.current ? react_dom.default.createPortal(/* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsxs)(QRContainer, { children: [/* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsx)(QRReaderOverlay, {
			captureModeTitle: captureModeTitle || "Scan QR Code",
			onClickBack: () => setCapturing(false)
		}), /* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsx)(require_components_QRReader_QRReader.QRReader, {
			constraints: { facingMode: "environment" },
			onResult: (result, error) => {
				if (result) {
					setCapturing(false);
					onResult(result, error);
				}
				if (error) {
					if ((0, _lightsparkdev_core.isError)(error)) {
						if (error.message.match(/Permission denied/)) {
							setErrorMsg("You must allow access to your camera to scan QR codes.");
							onUserDenyAccess();
						}
					}
				}
			},
			containerStyle,
			videoContainerStyle,
			videoStyle
		})] }), nodeRef.current) : null,
		/* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsxs)(ScanQRButton, {
			onClick: () => setCapturing(true),
			hasError: Boolean(errorMsg),
			children: [/* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsx)(require_components_Icon_Icon.Icon, {
				name: "CameraCapture",
				width: 64
			}), /* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsx)("div", {
				css: { marginTop: "21px" },
				children: "Scan QR Code"
			})]
		}),
		errorMsg ? /* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsx)(require_styles_fields.FieldError, { children: errorMsg }) : null
	] });
}
const StyledQRReaderOverlay = _emotion_styled.default.div`
  position: fixed;
  top: 0;
  left: 0;
  height: 100%;
  z-index: ${require_styles_z_index.z.qrReaderOverlay};
  left: 50%;
  transform: translateX(-50%);
`;
const QRContainer = _emotion_styled.default.div`
  // some of these styles aren't applied properly via the provided props, override:
  video {
    z-index: ${require_styles_z_index.z.qrReaderVideo} !important;
    padding: 0 !important;
    position: fixed !important;
    width: 100vw !important;
    height: 100vh !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    object-fit: cover !important;
  }
`;
const QRReaderButtonContainer = _emotion_styled.default.div``;
const ScanQRButton = (0, _emotion_styled.default)(require_components_UnstyledButton.UnstyledButton)`
  ${require_styles_fields.standardBorderColor}
  ${require_styles_fields.aboveFieldError}
  margin-top: 16px;
  border-style: solid;
  border-width: 1px;
  ${require_styles_common.standardBorderRadius(8)}
  width: 100%;
  padding: 24px 16px 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  color: ${({ theme }) => theme.lcNeutral};
  div:last-of-type {
    color: ${({ theme }) => theme.c4Neutral};
    font-weight: 600;
  }
`;
const ScreenContext = _emotion_styled.default.div`
  position: fixed;
  width: 100vw;
  height: 100vh;
  left: 50%;
  transform: translateX(-50%);
  color: ${require_styles_colors.colors.white};
  text-align: center;
`;
const qrOverlayHeaderHeightPx = 80;
const BackButton = (0, _emotion_styled.default)(require_components_UnstyledButton.UnstyledButton)`
  height: ${qrOverlayHeaderHeightPx}px;
  width: ${qrOverlayHeaderHeightPx}px;
  color: ${require_styles_colors.colors.white};
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  top: 0;
  left: 0;
`;
const OverlayHeader = _emotion_styled.default.div`
  position: absolute;
  top: 0;
  font-size: ${require_styles_utils.pxToRems(16)};
  text-align: center;
  width: 100%;
  height: ${qrOverlayHeaderHeightPx}px;
  display: flex;
  align-items: center;
  justify-content: center;
`;
const OverlayFooter = _emotion_styled.default.div`
  padding: 16px 0;
  position: absolute;
  height: 32%;
  max-height: 250px;
  background: ${require_styles_colors.colors.black};
  bottom: 0;
  left: 0;
  width: 100%;
  font-size: ${require_styles_utils.pxToRems(16)};
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
`;
//#endregion
exports.QRReaderButton = QRReaderButton;
