import { objectWithoutProperties as _objectWithoutProperties, slicedToArray as _slicedToArray, extends as _extends, objectSpread2 as _objectSpread2 } from '../../_virtual/_rollupPluginBabelHelpers.js';
import React__default, { forwardRef, useState, useRef, useEffect } from 'react';
import { createPortal } from 'react-dom';
import { offset, flip, shift, useFloating, autoUpdate } from '@floating-ui/react-dom';
import { findRootElement, getHTMLElement, getIncreasedRadius } from './utils/index.js';
import { MaskContainer, Mask, Highlight, TourPortal } from './Tour.styles.js';
import { base } from './variatoins/_view/base.js';
import { base as base$1 } from './variatoins/_size/base.js';
import { classes } from './Tour.tokens.js';
import { canUseDOM } from '../../utils/canUseDOM.js';

var _Mask;
var _excluded = ["steps", "current", "defaultCurrent", "open", "defaultOpen", "onClose", "withOverlay", "overlayColor", "zIndex", "view", "size", "offset", "highlightOffset", "renderStep"];
var tourRoot = function tourRoot(Root) {
  return /*#__PURE__*/forwardRef(function (_ref, outerRef) {
    var _highlightRect$left, _highlightRect$top, _highlightRect$width, _highlightRect$height;
    var steps = _ref.steps,
      current = _ref.current,
      _ref$defaultCurrent = _ref.defaultCurrent,
      defaultCurrent = _ref$defaultCurrent === void 0 ? 0 : _ref$defaultCurrent,
      open = _ref.open,
      _ref$defaultOpen = _ref.defaultOpen,
      defaultOpen = _ref$defaultOpen === void 0 ? false : _ref$defaultOpen,
      onClose = _ref.onClose,
      _ref$withOverlay = _ref.withOverlay,
      withOverlay = _ref$withOverlay === void 0 ? true : _ref$withOverlay,
      overlayColor = _ref.overlayColor,
      _ref$zIndex = _ref.zIndex,
      zIndex = _ref$zIndex === void 0 ? 9000 : _ref$zIndex,
      view = _ref.view,
      size = _ref.size,
      _ref$offset = _ref.offset,
      offsetProp = _ref$offset === void 0 ? [12, 12] : _ref$offset,
      _ref$highlightOffset = _ref.highlightOffset,
      highlightOffset = _ref$highlightOffset === void 0 ? 4 : _ref$highlightOffset,
      renderStep = _ref.renderStep,
      rest = _objectWithoutProperties(_ref, _excluded);
    var TOUR_PORTAL_ID = "plasma-tour-portal-".concat(Date.now());
    var isCurrentControlled = typeof current === 'number';
    var isOpenControlled = typeof open === 'boolean';
    var _useState = useState(defaultCurrent),
      _useState2 = _slicedToArray(_useState, 2),
      innerCurrent = _useState2[0],
      setInnerCurrent = _useState2[1];
    var _useState3 = useState(defaultOpen),
      _useState4 = _slicedToArray(_useState3, 2),
      innerOpen = _useState4[0],
      setInnerOpen = _useState4[1];
    var _useState5 = useState(null),
      _useState6 = _slicedToArray(_useState5, 2),
      highlightRect = _useState6[0],
      setHighlightRect = _useState6[1];
    var _useState7 = useState(null),
      _useState8 = _slicedToArray(_useState7, 2),
      highlightBorderRadius = _useState8[0],
      setHighlightBorderRadius = _useState8[1];
    var _useState9 = useState(null),
      _useState10 = _slicedToArray(_useState9, 2),
      targetElement = _useState10[0],
      setTargetElement = _useState10[1];
    var portalRef = useRef(null);
    var active = isCurrentControlled ? current : innerCurrent;
    var isOpen = isOpenControlled ? open : innerOpen;
    var currentStep = steps[active];
    var rawPlacement = currentStep === null || currentStep === void 0 ? void 0 : currentStep.placement;
    var placement = (Array.isArray(rawPlacement) ? rawPlacement[0] : rawPlacement) || 'bottom';
    var middleware = [offset(offsetProp[0]), flip({
      fallbackPlacements: Array.isArray(currentStep === null || currentStep === void 0 ? void 0 : currentStep.placement) ? currentStep.placement : undefined
    }), shift({
      padding: offsetProp[1]
    })];
    var _useFloating = useFloating({
        placement: placement,
        middleware: middleware,
        whileElementsMounted: autoUpdate
      }),
      refs = _useFloating.refs,
      floatingStyles = _useFloating.floatingStyles,
      calculatedPlacement = _useFloating.placement;
    var handleSetOpen = function handleSetOpen(value) {
      if (!isOpenControlled) {
        setInnerOpen(value);
      }
      if (!value) {
        onClose === null || onClose === void 0 || onClose();
        setInnerCurrent(0);
        setHighlightRect(null);
        setTargetElement(null);
      }
    };
    var handleClose = function handleClose() {
      handleSetOpen(false);
    };
    var updateHighlight = function updateHighlight() {
      if (!isOpen || !currentStep) {
        return;
      }
      var rootItem = findRootElement(currentStep.target);
      var highlightElement = getHTMLElement(rootItem);
      if (highlightElement) {
        var _currentStep$borderRa;
        var rect = highlightElement.getBoundingClientRect();
        setHighlightRect(rect);
        setTargetElement(highlightElement);
        var borderRadius = currentStep.borderRadius === 'auto' || currentStep.borderRadius === undefined || currentStep.borderRadius === null ? getIncreasedRadius(rootItem, highlightOffset) : (_currentStep$borderRa = currentStep === null || currentStep === void 0 ? void 0 : currentStep.borderRadius) !== null && _currentStep$borderRa !== void 0 ? _currentStep$borderRa : '0px';
        setHighlightBorderRadius(borderRadius);
      } else {
        setHighlightRect(null);
        setTargetElement(null);
      }
    };
    useEffect(function () {
      refs.setReference(targetElement);
    }, [refs, targetElement]);
    useEffect(function () {
      if (!canUseDOM) {
        return;
      }
      var portal = document.getElementById(TOUR_PORTAL_ID);
      if (!portal) {
        portal = document.createElement('div');
        portal.setAttribute('id', TOUR_PORTAL_ID);
        document.body.appendChild(portal);
      }
      portalRef.current = portal;
      return function () {
        if (portal) {
          portal.remove();
        }
      };
    }, []);
    useEffect(function () {
      updateHighlight();
      window.addEventListener('resize', updateHighlight);
      window.addEventListener('scroll', updateHighlight, true);
      return function () {
        window.removeEventListener('resize', updateHighlight);
        window.removeEventListener('scroll', updateHighlight, true);
      };
    }, [currentStep]);
    useEffect(function () {
      if (isOpen && targetElement) {
        targetElement.scrollIntoView({
          block: 'center',
          inline: 'center',
          behavior: 'smooth'
        });
      }
    }, [isOpen, active, targetElement]);
    useEffect(function () {
      var handleKeyDown = function handleKeyDown(e) {
        if (e.key === 'Escape') {
          handleClose();
        }
      };
      if (isOpen) {
        window.addEventListener('keydown', handleKeyDown);
      }
      return function () {
        window.removeEventListener('keydown', handleKeyDown);
      };
    }, [isOpen, handleClose]);
    if (!currentStep || !canUseDOM || !portalRef.current) {
      return null;
    }
    var tourContent = /*#__PURE__*/React__default.createElement(Root, _extends({
      renderStep: renderStep,
      steps: steps,
      ref: outerRef,
      view: view,
      size: size
    }, rest), isOpen && withOverlay && /*#__PURE__*/React__default.createElement(MaskContainer, {
      className: classes.mask,
      zIndex: zIndex
    }, _Mask || (_Mask = /*#__PURE__*/React__default.createElement(Mask, null)), Boolean(highlightRect) && /*#__PURE__*/React__default.createElement(Highlight, {
      overlayColor: overlayColor,
      borderRadius: highlightBorderRadius,
      style: {
        left: ((_highlightRect$left = highlightRect === null || highlightRect === void 0 ? void 0 : highlightRect.left) !== null && _highlightRect$left !== void 0 ? _highlightRect$left : 0) - highlightOffset,
        top: ((_highlightRect$top = highlightRect === null || highlightRect === void 0 ? void 0 : highlightRect.top) !== null && _highlightRect$top !== void 0 ? _highlightRect$top : 0) - highlightOffset,
        width: ((_highlightRect$width = highlightRect === null || highlightRect === void 0 ? void 0 : highlightRect.width) !== null && _highlightRect$width !== void 0 ? _highlightRect$width : 0) + highlightOffset * 2,
        height: ((_highlightRect$height = highlightRect === null || highlightRect === void 0 ? void 0 : highlightRect.height) !== null && _highlightRect$height !== void 0 ? _highlightRect$height : 0) + highlightOffset * 2
      }
    })), isOpen && Boolean(targetElement) && /*#__PURE__*/React__default.createElement(TourPortal, {
      ref: refs.setFloating,
      style: _objectSpread2(_objectSpread2({}, floatingStyles), {}, {
        zIndex: Number(zIndex)
      }),
      "data-placement": calculatedPlacement
    }, renderStep && renderStep(active, steps.length, active === steps.length - 1, steps[active])));
    return /*#__PURE__*/createPortal(tourContent, portalRef.current);
  });
};
var tourConfig = {
  name: 'Tour',
  tag: 'div',
  layout: tourRoot,
  base: '',
  variations: {
    view: {
      css: base
    },
    size: {
      css: base$1
    }
  },
  defaults: {
    view: 'default',
    size: 'm'
  }
};

export { tourConfig, tourRoot };
//# sourceMappingURL=Tour.js.map
