import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
// @ts-nocheck
import React from 'react';
import classNames from 'classnames';
import useForceUpdate from '../utils/hooks/useForceUpdate';
import { ConfigContext } from '../config-provider/context';
import getScrollBarSize from '../components/rc-util/getScrollBarSize';
import Icon from '../icon';
import { RcDrawer } from '../components';
var CloseLine = Icon.CloseLine;
var defaultPushState = {
  distance: 180
};
var DrawerContext = /*#__PURE__*/React.createContext(null);
var Drawer = /*#__PURE__*/React.forwardRef(function (props, ref) {
  var title = props.title,
      visible = props.visible,
      destroyOnClose = props.destroyOnClose,
      drawerStyle = props.drawerStyle,
      _props$closable = props.closable,
      closable = _props$closable === void 0 ? true : _props$closable,
      headerStyle = props.headerStyle,
      footer = props.footer,
      footerStyle = props.footerStyle,
      onClose = props.onClose,
      _props$closeIcon = props.closeIcon,
      closeIcon = _props$closeIcon === void 0 ? /*#__PURE__*/React.createElement(CloseLine, null) : _props$closeIcon,
      children = props.children,
      bodyStyle = props.bodyStyle,
      _props$placement = props.placement,
      placement = _props$placement === void 0 ? 'right' : _props$placement,
      _props$push = props.push,
      _push = _props$push === void 0 ? defaultPushState : _props$push,
      _props$mask = props.mask,
      mask = _props$mask === void 0 ? true : _props$mask,
      width = props.width,
      height = props.height,
      _props$keyboard = props.keyboard,
      keyboard = _props$keyboard === void 0 ? true : _props$keyboard,
      zIndex = props.zIndex,
      style = props.style,
      className = props.className,
      _props$maskClosable = props.maskClosable,
      maskClosable = _props$maskClosable === void 0 ? true : _props$maskClosable,
      _props$level = props.level,
      level = _props$level === void 0 ? null : _props$level,
      drawerGetPopupContainer = props.getContainer,
      _props$size = props.size,
      size = _props$size === void 0 ? 'medium' : _props$size,
      _props$direction = props.direction,
      direction = _props$direction === void 0 ? 'rtl' : _props$direction,
      rest = _objectWithoutProperties(props, ["title", "visible", "destroyOnClose", "drawerStyle", "closable", "headerStyle", "footer", "footerStyle", "onClose", "closeIcon", "children", "bodyStyle", "placement", "push", "mask", "width", "height", "keyboard", "zIndex", "style", "className", "maskClosable", "level", "getContainer", "size", "direction"]);

  var _React$useContext = React.useContext(ConfigContext),
      getPrefixClassName = _React$useContext.getPrefixClassName,
      getPopupContainer = _React$useContext.getPopupContainer;

  var forceUpdate = useForceUpdate();

  var _React$useState = React.useState(false),
      _React$useState2 = _slicedToArray(_React$useState, 2),
      internalPush = _React$useState2[0],
      setPush = _React$useState2[1];

  var destroyClose = React.useRef(false);
  var drawerCls = getPrefixClassName('drawer');
  var isDestroyOnClose = destroyOnClose && !visible;
  var operations = React.useMemo(function () {
    return {
      push: function push() {
        if (_push) {
          setPush(true);
        }
      },
      pull: function pull() {
        if (_push) {
          setPush(false);
        }
      }
    };
  }, [_push]);

  function renderCloseIcon() {
    return closable && /*#__PURE__*/React.createElement("button", {
      type: "button",
      onClick: onClose,
      "aria-label": "Close",
      className: "".concat(drawerCls, "-close"),
      style: {
        '--scroll-bar': "".concat(getScrollBarSize(), "px")
      }
    }, closeIcon);
  }

  function renderHeader() {
    if (!title && !closable) {
      return null;
    }

    var headerClassName = title ? "".concat(drawerCls, "-header") : "".concat(drawerCls, "-header-no-title");
    return /*#__PURE__*/React.createElement("div", {
      className: headerClassName,
      style: headerStyle
    }, title && /*#__PURE__*/React.createElement("div", {
      className: "".concat(drawerCls, "-title")
    }, title), closable && renderCloseIcon());
  }

  function renderFooter() {
    if (!footer) {
      return null;
    }

    var footerClassName = "".concat(drawerCls, "-footer");
    return /*#__PURE__*/React.createElement("div", {
      className: footerClassName,
      style: footerStyle
    }, footer);
  }

  var onDestroyTransitionEnd = function onDestroyTransitionEnd() {
    if (!isDestroyOnClose) {
      return;
    }

    if (!visible) {
      destroyClose.current = true;
      forceUpdate();
    }
  }; // render body


  var renderBody = function renderBody() {
    if (destroyClose.current && !visible) {
      return null;
    }

    destroyClose.current = false;
    var containerStyle = {};

    if (isDestroyOnClose) {
      // Increase the opacity transition, delete children after closing.
      containerStyle.opacity = 0;
      containerStyle.transition = 'opacity .3s';
    }

    return /*#__PURE__*/React.createElement("div", {
      className: "".concat(drawerCls, "-wrapper-body"),
      style: _objectSpread(_objectSpread({}, containerStyle), drawerStyle),
      onTransitionEnd: onDestroyTransitionEnd
    }, renderHeader(), /*#__PURE__*/React.createElement("div", {
      className: "".concat(drawerCls, "-body"),
      style: bodyStyle
    }, children), renderFooter());
  };

  var getOffsetStyle = function getOffsetStyle() {
    if (!visible && !mask) {
      return {};
    }

    var defaultWidth;

    if (size === 'large') {
      defaultWidth = 852;
    } else if (size === 'small') {
      defaultWidth = 426;
    } else {
      defaultWidth = 640;
    }

    var offsetStyle = {};

    if (placement === 'left' || placement === 'right') {
      offsetStyle.width = typeof width === 'undefined' ? defaultWidth : width; // console.log(offsetStyle, '--------offsetStyle');
    } else {
      offsetStyle.height = typeof height === 'undefined' ? defaultWidth : height;
    }

    return offsetStyle;
  }; // const getRcDrawerStyle = () => {
  //   // get drawer push width or height
  //   const getPushTransform = (_placement?: any) => {
  //     let distance: number | string;
  //     if (typeof push === 'boolean') {
  //       distance = push ? defaultPushState.distance : 0;
  //     } else {
  //       distance = push!.distance;
  //     }
  //     distance = parseFloat(String(distance || 0));
  //     if (_placement === 'left' || _placement === 'right') {
  //       return `translateX(${_placement === 'left' ? distance : -distance}px)`;
  //     }
  //     if (_placement === 'top' || _placement === 'bottom') {
  //       return `translateY(${_placement === 'top' ? distance : -distance}px)`;
  //     }
  //   };
  //   // 当无 mask 时，将 width 应用到外层容器上
  //   const offsetStyle = mask ? {} : getOffsetStyle();
  //   return {
  //     zIndex,
  //     transform: internalPush ? getPushTransform(placement) : undefined,
  //     ...offsetStyle,
  //     ...style,
  //   };
  // };


  var drawerCustomStyle = function drawerCustomStyle() {
    // const offsetStyle = mask ? getOffsetStyle() : {};
    return _objectSpread({
      zIndex: zIndex
    }, style);
  };

  var drawerClassName = classNames(_defineProperty({
    'no-mask': !mask
  }, "".concat(drawerCls, "-rtl"), direction === 'rtl'), className); // const offsetStyle = mask ? getOffsetStyle() : {};

  var offsetStyle = getOffsetStyle();
  return /*#__PURE__*/React.createElement(DrawerContext.Provider, {
    value: operations
  }, /*#__PURE__*/React.createElement(RcDrawer, Object.assign({
    handler: false
  }, _objectSpread({
    placement: placement,
    maskClosable: maskClosable,
    level: level,
    keyboard: keyboard,
    children: children,
    onClose: onClose
  }, rest), offsetStyle, {
    open: visible,
    showMask: mask,
    prefixCls: drawerCls,
    style: drawerCustomStyle(),
    className: drawerClassName,
    ref: ref,
    getContainer: drawerGetPopupContainer || getPopupContainer
  }), renderBody()));
});
export default Drawer;