function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
import React, { useCallback, useRef, useState } from 'react';
import FocusLock from 'react-focus-lock';
import { AnimatePresence, motion, useDragControls } from 'framer-motion';
import { RemoveScroll } from 'react-remove-scroll';
import { Flexbox, Icon, Portal, theme, useMedia, useOnClickOutside } from '../..';
import { Backdrop, DragHandle, Handle, StyledBottomSheet, StyledIconButton } from './BottomSheet.styles';
import { isBoolean } from '../../common/utils';
import { TRANSITION_DURATION } from './constants';
var BottomSheet = function BottomSheet(_ref) {
  var children = _ref.children,
    className = _ref.className,
    closeOnClickOutside = _ref.closeOnClickOutside,
    fullScreenMobile = _ref.fullScreenMobile,
    height = _ref.height,
    invertedColors = _ref.invertedColors,
    onClose = _ref.onClose,
    isOpenExternal = _ref.open,
    _ref$showBackdrop = _ref.showBackdrop,
    showBackdrop = _ref$showBackdrop === void 0 ? true : _ref$showBackdrop,
    showSwipeHandle = _ref.showSwipeHandle,
    title = _ref.title;
  var isControlled = isBoolean(isOpenExternal);
  var isMobile = useMedia(function (t) {
    return t.media.lessThan(theme.breakpoints.sm);
  }) || false;
  var internalRef = useRef(null);
  var _useState = useState(true),
    _useState2 = _slicedToArray(_useState, 2),
    isOpenInternal = _useState2[0],
    setIsOpenInternal = _useState2[1];
  var shouldRender = isControlled ? isOpenExternal : isOpenInternal;
  var dragControls = useDragControls();
  var handleClose = useCallback(function () {
    setIsOpenInternal(false);
    if (typeof onClose === 'function') {
      onClose();
    }
  }, [onClose]);
  var handleDragStart = useCallback(function (event) {
    dragControls.start(event, {
      snapToCursor: false
    });
  }, [dragControls]);
  var handleDragEnd = useCallback(function (event, info) {
    var _info$offset;
    if ((info === null || info === void 0 || (_info$offset = info.offset) === null || _info$offset === void 0 ? void 0 : _info$offset.y) > 80) {
      handleClose();
    }
  }, [handleClose]);
  useOnClickOutside(internalRef, function () {
    if (closeOnClickOutside) {
      handleClose();
    }
  });
  return React.createElement(Portal, null, React.createElement(AnimatePresence, null, shouldRender ? React.createElement(FocusLock, {
    disabled: !isMobile
  }, React.createElement(RemoveScroll, {
    enabled: isMobile
  }, showBackdrop && React.createElement(motion.div, {
    key: "backdrop",
    initial: {
      opacity: 0,
      zIndex: theme.zIndex.overlay,
      position: 'fixed'
    },
    exit: {
      opacity: 0
    },
    animate: {
      opacity: 1
    },
    transition: {
      type: 'ease',
      duration: TRANSITION_DURATION
    }
  }, React.createElement(Backdrop, {
    container: true,
    alignItems: "center",
    justifyContent: "center"
  })), React.createElement(StyledBottomSheet, {
    key: "bottomsheet",
    ref: internalRef,
    className: className,
    dragControls: dragControls,
    dragConstraints: {
      right: 0,
      left: 0,
      top: 0,
      bottom: 0
    },
    dragListener: false,
    drag: "y",
    onDragEnd: handleDragEnd,
    $fullScreenMobile: fullScreenMobile,
    height: height,
    $invertedColors: invertedColors,
    initial: {
      bottom: '-100%',
      position: 'fixed',
      zIndex: theme.zIndex.modal
    },
    animate: {
      bottom: 0
    },
    exit: {
      bottom: '-100%'
    },
    transition: {
      type: 'ease',
      duration: TRANSITION_DURATION
    }
  }, React.createElement(Flexbox, {
    container: true,
    direction: "column",
    gap: 2
  }, React.createElement(DragHandle, {
    onTouchStart: handleDragStart
  }, React.createElement(Flexbox, {
    container: true,
    direction: "column",
    width: "100%"
  }, showSwipeHandle && React.createElement(Flexbox, {
    item: true,
    alignItems: "center",
    alignSelf: "center"
  }, React.createElement(Handle, null)), React.createElement(Flexbox, {
    container: true,
    justifyContent: "space-between",
    alignItems: "center"
  }, React.createElement(Flexbox, {
    item: true
  }, title), React.createElement(Flexbox, {
    item: true
  }, React.createElement(StyledIconButton, {
    $invertedColors: invertedColors,
    onClick: handleClose,
    size: "s",
    variant: "primary"
  }, React.createElement(Icon.Cross16, null))))))), React.createElement(Flexbox, {
    item: true
  }, children)))) : null));
};
export default BottomSheet;