"use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

var _chunk2JKTPKU6cjs = require('./chunk-2JKTPKU6.cjs');




var _chunkAEJ7VTL4cjs = require('./chunk-AEJ7VTL4.cjs');


var _chunkMFKERIW4cjs = require('./chunk-MFKERIW4.cjs');


var _chunkKKOBB4X5cjs = require('./chunk-KKOBB4X5.cjs');


var _chunkSNSG4HBQcjs = require('./chunk-SNSG4HBQ.cjs');


var _chunkZU72XWNEcjs = require('./chunk-ZU72XWNE.cjs');


var _chunkWF7Z2VITcjs = require('./chunk-WF7Z2VIT.cjs');


var _chunkRSHN4K6Ncjs = require('./chunk-RSHN4K6N.cjs');


var _chunkQQDRBCBYcjs = require('./chunk-QQDRBCBY.cjs');

// src/components/QRReaderButton.tsx
var _styled = require('@emotion/styled'); var _styled2 = _interopRequireDefault(_styled);
var _core = require('@lightsparkdev/core');
var _react = require('react');
var _reactdom = require('react-dom'); var _reactdom2 = _interopRequireDefault(_reactdom);
var _jsxruntime = require('@emotion/react/jsx-runtime');
var containerStyle = {};
var videoContainerStyle = {
  position: "static",
  width: "auto",
  height: "auto",
  overflow: "initial"
};
var videoStyle = {};
function QRReaderOverlay({
  captureModeTitle,
  onClickBack
}) {
  return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, StyledQRReaderOverlay, { children: [
    /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, ScreenContext, { children: [
      /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, OverlayHeader, { children: [
        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, BackButton, { onClick: onClickBack, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkWF7Z2VITcjs.Icon, { name: "ArrowLeft", width: 25 }) }),
        captureModeTitle ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { children: captureModeTitle }) : null
      ] }),
      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
        "div",
        {
          css: {
            position: "absolute",
            width: "146px",
            top: "13%",
            left: "0px",
            right: "0px",
            margin: "auto"
          },
          children: "Scan a BTC or Lightning QR code"
        }
      ),
      /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, OverlayFooter, { children: [
        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { children: "or" }),
        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkKKOBB4X5cjs.Button, { text: "Enter an address", onClick: onClickBack, mt: 12 })
      ] })
    ] }),
    /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
      "svg",
      {
        height: "100%",
        viewBox: "0 0 1784 623",
        fill: "none",
        xmlns: "http://www.w3.org/2000/svg",
        children: [
          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
            "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__ */ _jsxruntime.jsx.call(void 0, 
            "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] = _react.useState.call(void 0, false);
  const [errorMsg, setErrorMsg] = _react.useState.call(void 0, null);
  const nodeRef = _react.useRef.call(void 0, null);
  _react.useEffect.call(void 0, () => {
    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;
      }
    };
  }, []);
  _react.useEffect.call(void 0, () => {
    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__ */ _jsxruntime.jsxs.call(void 0, QRReaderButtonContainer, { children: [
    capturing && nodeRef.current ? (
      // portal needed to break outside card stacking context and stay above header
      _reactdom2.default.createPortal(
        /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, QRContainer, { children: [
          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
            QRReaderOverlay,
            {
              captureModeTitle: captureModeTitle || "Scan QR Code",
              onClickBack: () => setCapturing(false)
            }
          ),
          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
            _chunk2JKTPKU6cjs.QRReader,
            {
              constraints: {
                facingMode: "environment"
              },
              onResult: (result, error) => {
                if (result) {
                  setCapturing(false);
                  onResult(result, error);
                }
                if (error) {
                  if (_core.isError.call(void 0, 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__ */ _jsxruntime.jsxs.call(void 0, 
      ScanQRButton,
      {
        onClick: () => setCapturing(true),
        hasError: Boolean(errorMsg),
        children: [
          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkWF7Z2VITcjs.Icon, { name: "CameraCapture", width: 64 }),
          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { css: { marginTop: "21px" }, children: "Scan QR Code" })
        ]
      }
    ),
    errorMsg ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkAEJ7VTL4cjs.FieldError, { children: errorMsg }) : null
  ] });
}
var StyledQRReaderOverlay = _styled2.default.div`
  position: fixed;
  top: 0;
  left: 0;
  height: 100%;
  z-index: ${_chunkZU72XWNEcjs.z.qrReaderOverlay};
  left: 50%;
  transform: translateX(-50%);
`;
var QRContainer = _styled2.default.div`
  // some of these styles aren't applied properly via the provided props, override:
  video {
    z-index: ${_chunkZU72XWNEcjs.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;
  }
`;
var QRReaderButtonContainer = _styled2.default.div``;
var ScanQRButton = _styled2.default.call(void 0, _chunkSNSG4HBQcjs.UnstyledButton)`
  ${_chunkAEJ7VTL4cjs.standardBorderColor}
  ${_chunkAEJ7VTL4cjs.aboveFieldError}
  margin-top: 16px;
  border-style: solid;
  border-width: 1px;
  ${_chunkRSHN4K6Ncjs.standardBorderRadius.call(void 0, 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;
  }
`;
var ScreenContext = _styled2.default.div`
  position: fixed;
  width: 100vw;
  height: 100vh;
  left: 50%;
  transform: translateX(-50%);
  color: ${_chunkQQDRBCBYcjs.colors.white};
  text-align: center;
`;
var qrOverlayHeaderHeightPx = 80;
var BackButton = _styled2.default.call(void 0, _chunkSNSG4HBQcjs.UnstyledButton)`
  height: ${qrOverlayHeaderHeightPx}px;
  width: ${qrOverlayHeaderHeightPx}px;
  color: ${_chunkQQDRBCBYcjs.colors.white};
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  top: 0;
  left: 0;
`;
var OverlayHeader = _styled2.default.div`
  position: absolute;
  top: 0;
  font-size: ${_chunkMFKERIW4cjs.pxToRems.call(void 0, 16)};
  text-align: center;
  width: 100%;
  height: ${qrOverlayHeaderHeightPx}px;
  display: flex;
  align-items: center;
  justify-content: center;
`;
var OverlayFooter = _styled2.default.div`
  padding: 16px 0;
  position: absolute;
  height: 32%;
  max-height: 250px;
  background: ${_chunkQQDRBCBYcjs.colors.black};
  bottom: 0;
  left: 0;
  width: 100%;
  font-size: ${_chunkMFKERIW4cjs.pxToRems.call(void 0, 16)};
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
`;



exports.QRReaderButton = QRReaderButton;
