import "core-js/modules/es.symbol.js";
import "core-js/modules/es.array.filter.js";
import "core-js/modules/es.array.for-each.js";
import "core-js/modules/es.array.push.js";
import "core-js/modules/es.object.define-properties.js";
import "core-js/modules/es.object.define-property.js";
import "core-js/modules/es.object.get-own-property-descriptor.js";
import "core-js/modules/es.object.get-own-property-descriptors.js";
import "core-js/modules/es.object.keys.js";
import "core-js/modules/es.object.to-string.js";
import "core-js/modules/esnext.iterator.constructor.js";
import "core-js/modules/esnext.iterator.filter.js";
import "core-js/modules/esnext.iterator.for-each.js";
import "core-js/modules/web.dom-collections.for-each.js";
import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
import _defineProperty from "@babel/runtime/helpers/defineProperty";
import "core-js/modules/es.array.concat.js";
import "core-js/modules/es.array.includes.js";
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
import classNames from 'classnames';
import React, { useState, useRef } from 'react';
import { useIsomorphicLayoutEffect, useUnmountedRef } from './hooks/index';
import { withNativeProps } from './utils/native-props';
import { mergeProps } from './utils/with-default-props';
import { useLockScroll } from './utils/use-lock-scroll';
import { renderToContainer } from './utils/render-to-container';
import { useSpring, animated } from '@react-spring/web';
import { withStopPropagation } from './utils/with-stop-propagation';
import { ShouldRender } from './utils/should-render';
import { defaultPopupBaseProps } from './popup-base-props';
import { useInnerVisible } from './utils/use-inner-visible';
import { useDrag } from '@use-gesture/react';
import { FcrMobileClosePopupIcon } from '../close-icon';
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
var classPrefix = "fcr-mobile-popup";
var defaultProps = _objectSpread(_objectSpread({}, defaultPopupBaseProps), {}, {
  closeOnSwipe: false,
  position: 'bottom'
});
export var Popup = function Popup(p) {
  var props = mergeProps(defaultProps, {}, p);
  var bodyCls = classNames("".concat(classPrefix, "-body"), props.bodyClassName, "".concat(classPrefix, "-body-position-").concat(props.position));
  var _useState = useState(props.visible),
    _useState2 = _slicedToArray(_useState, 2),
    active = _useState2[0],
    setActive = _useState2[1];
  var ref = useRef(null);
  useLockScroll(ref, props.disableBodyScroll && active ? 'strict' : false);
  useIsomorphicLayoutEffect(function () {
    if (props.visible) {
      setActive(true);
    }
  }, [props.visible]);
  var unmountedRef = useUnmountedRef();
  var _useSpring = useSpring({
      percent: props.visible ? 0 : 100,
      config: {
        precision: 0.1,
        mass: 0.4,
        tension: 300,
        friction: 30
      },
      onRest: function onRest() {
        if (unmountedRef.current) return;
        setActive(props.visible);
        if (props.visible) {
          var _props$afterShow;
          (_props$afterShow = props.afterShow) === null || _props$afterShow === void 0 || _props$afterShow.call(props);
        } else {
          var _props$afterClose;
          (_props$afterClose = props.afterClose) === null || _props$afterClose === void 0 || _props$afterClose.call(props);
        }
      }
    }),
    percent = _useSpring.percent;
  var bind = useDrag(function (_ref) {
    var _ref$swipe = _slicedToArray(_ref.swipe, 2),
      swipeY = _ref$swipe[1];
    if (!props.closeOnSwipe) return;
    if (swipeY === 1 && props.position === 'bottom' || swipeY === -1 && props.position === 'top') {
      var _props$onClose;
      (_props$onClose = props.onClose) === null || _props$onClose === void 0 || _props$onClose.call(props);
    }
  }, {
    axis: 'y',
    enabled: ['top', 'bottom'].includes(props.position)
  });
  var maskVisible = useInnerVisible(active && props.visible);
  var node = withStopPropagation(props.stopPropagation, withNativeProps(props, /*#__PURE__*/_jsxs("div", _objectSpread(_objectSpread({
    id: props.elId,
    className: classPrefix,
    onClick: props.onClick,
    style: {
      display: active ? undefined : 'none',
      touchAction: ['top', 'bottom'].includes(props.position) ? 'none' : 'auto'
    }
  }, bind()), {}, {
    children: [/*#__PURE__*/_jsx("div", {
      className: "fcr-popup-modal-mask",
      onClick: function onClick(e) {
        var _props$onMaskClick;
        (_props$onMaskClick = props.onMaskClick) === null || _props$onMaskClick === void 0 || _props$onMaskClick.call(props, e);
        if (props.closeOnMaskClick) {
          var _props$onClose2;
          (_props$onClose2 = props.onClose) === null || _props$onClose2 === void 0 || _props$onClose2.call(props);
        }
      }
    }), /*#__PURE__*/_jsxs(animated.div, {
      className: bodyCls,
      style: _objectSpread(_objectSpread({}, props.bodyStyle), {}, {
        pointerEvents: percent.to(function (v) {
          return v === 0 ? 'unset' : 'none';
        }),
        transform: percent.to(function (v) {
          if (props.position === 'bottom') {
            return "translate(0, ".concat(v, "%)");
          }
          if (props.position === 'top') {
            return "translate(0, -".concat(v, "%)");
          }
          if (props.position === 'left') {
            return "translate(-".concat(v, "%, 0)");
          }
          if (props.position === 'right') {
            return "translate(".concat(v, "%, 0)");
          }
          return 'none';
        })
      }),
      ref: ref,
      children: [props.showCloseButton && /*#__PURE__*/_jsx("a", {
        className: classNames("".concat(classPrefix, "-close-icon"), 'fcr-mobile-plain-anchor'),
        onClick: function onClick() {
          var _props$onClose3;
          (_props$onClose3 = props.onClose) === null || _props$onClose3 === void 0 || _props$onClose3.call(props);
        },
        role: "button",
        children: props.closeIcon || /*#__PURE__*/_jsx(FcrMobileClosePopupIcon, {})
      }), props.children]
    })]
  }))));
  return /*#__PURE__*/_jsx(ShouldRender, {
    active: active,
    forceRender: props.forceRender,
    destroyOnClose: props.destroyOnClose,
    children: renderToContainer(props.getContainer, node)
  });
};