import { jsx } from "react/jsx-runtime";
import { useState, useEffect } from "react";
import { x as xrStore } from "./xrStore-BymedRtx.js";
function XREnterButton() {
  const [supported, setSupported] = useState(false);
  const [entered, setEntered] = useState(false);
  useEffect(() => {
    let cancelled = false;
    if (navigator.xr) {
      navigator.xr.isSessionSupported("immersive-ar").then((result) => {
        if (!cancelled)
          setSupported(result);
      }).catch(() => {
      });
    }
    return () => {
      cancelled = true;
    };
  }, []);
  useEffect(() => {
    const unsubscribe = xrStore.subscribe((state) => {
      setEntered(state.session != null);
    });
    return unsubscribe;
  }, []);
  if (!supported)
    return null;
  const handleClick = () => {
    if (entered) {
      const { session } = xrStore.getState();
      if (session)
        session.end();
    } else {
      xrStore.enterAR();
    }
  };
  return jsx("button", { type: "button", onClick: handleClick, style: {
    border: "1px solid white",
    padding: "12px 24px",
    borderRadius: "4px",
    background: "rgba(0, 0, 0, 0.1)",
    color: "white",
    font: "normal 0.8125rem sans-serif",
    outline: "none",
    cursor: "pointer",
    zIndex: 1,
    position: "absolute"
  }, children: entered ? "Exit AR" : "Enter AR" });
}
export {
  XREnterButton as default
};
