import {
  QRReader
} from "./chunk-TJKJYY5O.js";
import {
  FieldError,
  aboveFieldError,
  standardBorderColor
} from "./chunk-FTMB6R72.js";
import {
  pxToRems
} from "./chunk-FAWI3ZGU.js";
import {
  Button
} from "./chunk-SIPHI6JZ.js";
import {
  UnstyledButton
} from "./chunk-5NUOBJXP.js";
import {
  z
} from "./chunk-55OQPFLF.js";
import {
  Icon
} from "./chunk-DMPXNHDT.js";
import {
  standardBorderRadius
} from "./chunk-HGZGGJQB.js";
import {
  colors
} from "./chunk-MIIIUXV6.js";

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

export {
  QRReaderButton
};
