import React, { useRef } from 'react';
import FocusLock from 'react-focus-lock';
import { AnimatePresence, motion } from 'framer-motion';
import { RemoveScroll } from 'react-remove-scroll';
import { Button, Flexbox, Icon, Portal, theme, useOnClickOutside } from '../..';
import { Backdrop, StyledBottomSheet } from './BottomSheet.styles';
var BottomSheet = function BottomSheet(_ref) {
  var children = _ref.children,
    className = _ref.className,
    closeOnClickOutside = _ref.closeOnClickOutside,
    fullScreenMobile = _ref.fullScreenMobile,
    _ref$height = _ref.height,
    height = _ref$height === void 0 ? '40%' : _ref$height,
    onClose = _ref.onClose,
    open = _ref.open,
    _ref$showBackdrop = _ref.showBackdrop,
    showBackdrop = _ref$showBackdrop === void 0 ? true : _ref$showBackdrop,
    title = _ref.title;
  var internalRef = useRef(null);
  useOnClickOutside(internalRef, function () {
    if (closeOnClickOutside && typeof onClose === 'function') {
      onClose();
    }
  });
  return React.createElement(Portal, null, React.createElement(AnimatePresence, null, open ? React.createElement(FocusLock, {
    disabled: fullScreenMobile
  }, React.createElement(RemoveScroll, {
    enabled: !fullScreenMobile
  }, 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: 0.2
    }
  }, React.createElement(Backdrop, {
    container: true,
    alignItems: "center",
    justifyContent: "center"
  })), React.createElement(motion.div, {
    key: "bottomsheet",
    initial: {
      bottom: '-100%',
      position: 'fixed',
      zIndex: theme.zIndex.modal
    },
    exit: {
      bottom: '-100%'
    },
    animate: {
      bottom: 0
    },
    transition: {
      type: 'ease',
      duration: 0.2
    },
    style: {
      width: '100%',
      height: '100%'
    }
  }, React.createElement(StyledBottomSheet, {
    className: className,
    fullScreenMobile: fullScreenMobile,
    height: height,
    ref: internalRef
  }, React.createElement(Flexbox, {
    container: true,
    direction: "column",
    gap: 2
  }, React.createElement(Flexbox, {
    container: true,
    item: true,
    justifyContent: "space-between",
    alignItems: "center"
  }, React.createElement(Flexbox, {
    item: true
  }, title), typeof onClose === 'function' && React.createElement(Flexbox, {
    item: true
  }, React.createElement(Button.Icon, {
    variant: "primary",
    onClick: onClose,
    size: "s"
  }, React.createElement(Icon.Cross16, {
    color: "currentColor"
  })))), React.createElement(Flexbox, {
    item: true
  }, children)))))) : null));
};
export default BottomSheet;