"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;
var _react = _interopRequireWildcard(require("react"));
var _classnames = _interopRequireDefault(require("classnames"));
var _reactPopper = require("../react-popper");
var _tourFooter = require("./components/tour-footer");
var _jsxRuntime = require("react/jsx-runtime");
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
/**
 * Component to demonstrate tour onboarding information.
 * Could be attached to any component on the page by its selector.
 * @uxr-only-supported
 * @midnight-gray-supported
 * @alpine-light-supported
 * */
const Tour = ({
  step,
  setNextStep,
  setPrevStep,
  onCompleteHandler,
  showTour,
  onSkipHandler,
  stepNumber = 0,
  totalSteps = 0,
  className = ''
}) => {
  const ref = (0, _react.useRef)(null);
  const [anchorEl, setAnchorEl] = (0, _react.useState)(null);
  const {
    selector,
    placement,
    content,
    imageSrc,
    altText
  } = step;
  let observer = null;
  (0, _react.useEffect)(() => {
    let anchorElement = document.querySelector(selector);
    if (anchorElement) {
      setAnchorEl(anchorElement);
    } else {
      observer = new MutationObserver(() => {
        anchorElement = document.querySelector(selector);
        if (anchorElement) {
          observer?.disconnect();
          setAnchorEl(anchorElement);
        }
      });
      observer.observe(document.body, {
        childList: true,
        subtree: true
      });
    }
    return () => {
      if (observer) {
        observer.disconnect();
        observer = null;
      }
    };
  }, [selector]);
  if (!anchorEl) {
    return null;
  }
  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactPopper.Popper, {
    open: showTour,
    rootEl: ref,
    container: anchorEl,
    placement: placement || _reactPopper.POPPER_PLACEMENTS_TYPES.BOTTOM,
    anchorEl: anchorEl,
    strategy: _reactPopper.POPPER_STRATEGY_OPTIONS.FIXED,
    popperModifiers: [_reactPopper.OFFSET_MODIFIER, _reactPopper.FLIP_MODIFIER],
    children: () => /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
      className: (0, _classnames.default)('tour-container popout popout-transition react-tooltip', className),
      ref: ref,
      "test-id": "tour-container",
      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("img", {
        className: "tour-image",
        "test-id": "tour-img",
        src: imageSrc,
        alt: altText
      }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
        className: "tour-content",
        "test-id": "tour-content",
        children: typeof content === 'string' ? /*#__PURE__*/(0, _jsxRuntime.jsx)("p", {
          children: content
        }) : content
      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_tourFooter.TourFooter, {
        stepNumber: stepNumber,
        totalSteps: totalSteps,
        onNextHandler: setNextStep,
        onPrevHandler: setPrevStep,
        onCompleteHandler: onCompleteHandler,
        onSkipHandler: onSkipHandler
      }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
        "data-popper-arrow": ""
      })]
    })
  });
};
var _default = exports.default = Tour;