import _extends from "@babel/runtime/helpers/esm/extends";
import React, { useCallback, useEffect, forwardRef, useState, useImperativeHandle } from "react";
import { Transition } from "react-transition-group";
import classnames from "classnames";
import { StyledAnimatedSpan, StyledCssTransition, StyledHeader, StyledIconsWrapperSmall, StyledListSeparator, StyledSheetIcons, StyledSheetWrapper, StyledSheetWrapperPaper } from "./Styles";
import { IconButton } from "../IconButton";
import { Overlay } from "../Overlay";
import { Tooltip } from "../Tooltip";
import { Window } from "../Window";
export const Sheet = /*#__PURE__*/forwardRef((_ref, ref) => {
  let {
    children,
    onClose,
    controls = [],
    open: defaultOpen = false,
    animation = "top",
    position = "center",
    mode = "normal",
    disableFocusLock = false,
    disableScrollLock = false,
    disableBackgroundColor = false,
    bodyStyle,
    bodyClassName,
    disableBackgroundClick = false,
    ...rest
  } = _ref;
  const [open, setOpen] = useState(defaultOpen);
  const [exited, setExited] = useState(true);
  useEffect(() => {
    setOpen(defaultOpen);
  }, [defaultOpen]);
  const handleEnter = useCallback(() => {
    setExited(false);
  }, []);
  const handleExited = useCallback(() => {
    setExited(true);
    onClose == null || onClose();
  }, [onClose]);
  const handleClose = useCallback(() => {
    setOpen(false);
  }, []);
  const handleBackgroundClick = useCallback(event => {
    if (!disableBackgroundClick) {
      event.preventDefault();
      handleClose();
    }
  }, [disableBackgroundClick, handleClose]);
  useImperativeHandle(ref, () => ({
    close: handleClose
  }));
  if (!open && exited) {
    return null;
  }
  return /*#__PURE__*/React.createElement(Window, _extends({}, rest, {
    onClose: handleClose,
    disableFocusLock: disableFocusLock,
    disableScrollLock: disableScrollLock
  }), open && /*#__PURE__*/React.createElement(Overlay, {
    onClick: handleBackgroundClick,
    disableBackgroundColor: disableBackgroundColor
  }), /*#__PURE__*/React.createElement(StyledSheetWrapper, {
    className: classnames("c-sheet__wrapper", bodyClassName),
    style: bodyStyle,
    $position: position,
    $mode: mode
  }, controls.length > 0 && /*#__PURE__*/React.createElement(StyledSheetIcons, null, controls.map((_ref2, index) => {
    let {
      icon: IconComponent,
      tooltip,
      onClick,
      disabled,
      className
    } = _ref2;
    const maxDurationIn = 4;
    const maxDurationOut = 2;
    const control = index + 1;
    const durationOut = Math.max(0, maxDurationOut - control);
    const durationIn = Math.min(control, maxDurationIn);
    return /*#__PURE__*/React.createElement(Transition, {
      appear: true,
      in: open,
      timeout: maxDurationIn * 100,
      key: "c-sheet-control-" + index
    }, state => /*#__PURE__*/React.createElement(Tooltip, {
      title: tooltip,
      disable: !tooltip || disabled
    }, /*#__PURE__*/React.createElement(StyledAnimatedSpan, {
      onClick: onClick,
      $disabled: disabled,
      $mode: mode,
      $state: state,
      className: className,
      $maxDurationIn: maxDurationIn / 10,
      $maxDurationOut: maxDurationOut / 10,
      $durationOut: durationOut / 10,
      $durationIn: durationIn / 10
    }, IconComponent)));
  })), /*#__PURE__*/React.createElement(StyledCssTransition, {
    appear: true,
    in: open,
    timeout: 400,
    classNames: "c-sheet__animation",
    $direction: animation,
    onEnter: handleEnter,
    onExited: handleExited
  }, /*#__PURE__*/React.createElement(StyledSheetWrapperPaper, {
    paperClass: "c-sheet__wrapper__paper"
  }, controls.length > 0 && /*#__PURE__*/React.createElement(StyledHeader, null, /*#__PURE__*/React.createElement(StyledIconsWrapperSmall, null, controls.map((_ref3, index) => {
    let {
      icon: IconComponent,
      tooltip,
      onClick,
      disabled,
      className
    } = _ref3;
    return /*#__PURE__*/React.createElement(Tooltip, {
      title: tooltip,
      disable: !tooltip || disabled,
      key: index
    }, /*#__PURE__*/React.createElement(IconButton, {
      onClick: onClick,
      disabled: disabled,
      className: className,
      variant: "text gray"
    }, IconComponent));
  })), /*#__PURE__*/React.createElement(StyledListSeparator, null)), children))));
});
Sheet.displayName = "Sheet";
//# sourceMappingURL=Sheet.js.map