import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
import React, { useContext, useEffect, useState } from 'react';
import classNames from 'classnames';
import Icon from '../icon';
import { scrollTo } from './utils/scrollTo';
import { getScrollHeight } from './utils/getScrollHeight';
import { ConfigContext } from '../config-provider/context';
import CSSMotion from '../components/rc-motion';
import { cloneElement } from '../utils/ReactNodeValidate';
var CircleFill = Icon.CircleFill,
    SquareFill = Icon.SquareFill;

var Backtop = function Backtop(props) {
  var visibilityHeight = props.visibilityHeight,
      className = props.className,
      children = props.children,
      toTopCallBack = props.toTopCallBack,
      onClick = props.onClick,
      bottom = props.bottom,
      target = props.target,
      right = props.right,
      shape = props.shape;

  var _useState = useState(false),
      _useState2 = _slicedToArray(_useState, 2),
      visible = _useState2[0],
      setVisible = _useState2[1];

  var _useContext = useContext(ConfigContext),
      getPrefixClassName = _useContext.getPrefixClassName;

  var backTopCls = getPrefixClassName('back-top'); // 样式整合

  var lastCls = classNames(backTopCls, className, _defineProperty({}, "".concat(backTopCls, "-").concat(shape), shape)); // 位置样式

  var positionSty = {
    right: right,
    bottom: bottom
  }; // 传入的是HTML 元素

  var ref = /*#__PURE__*/React.createRef(); // 获取默认的target

  var getDefaultTarget = function getDefaultTarget() {
    var _ref$current;

    return (ref === null || ref === void 0 ? void 0 : (_ref$current = ref.current) === null || _ref$current === void 0 ? void 0 : _ref$current.ownerDocument) ? ref.current.ownerDocument : window;
  }; // 滚动条滚动


  var handleScroll = function handleScroll(e) {
    var result = getScrollHeight(e === null || e === void 0 ? void 0 : e.currentTarget);
    var scrollVisible = result > visibilityHeight;
    setVisible(scrollVisible);
  }; // 初始化滚动事件


  var initScrollEvent = function initScrollEvent(container) {
    container === null || container === void 0 ? void 0 : container.addEventListener('scroll', function (e) {
      handleScroll(e);
    });
    handleScroll({
      currentTarget: container
    });
  };

  useEffect(function () {
    var getTarget = target || getDefaultTarget;
    var container = getTarget();
    initScrollEvent(container);
    return function () {
      container === null || container === void 0 ? void 0 : container.removeEventListener('scroll', function (e) {
        handleScroll(e);
      });
    };
  }, [target]); // 事件触发

  var handleScrollTop = function handleScrollTop(e) {
    scrollTo({
      position: 0,
      getContainer: target || getDefaultTarget,
      callBack: toTopCallBack
    });

    if (typeof onClick === 'function') {
      onClick(e);
    }
  }; // 渲染children ---finished


  var renderChildrenDom = function renderChildrenDom() {
    var renderDefaultChild = shape === 'circle' ? /*#__PURE__*/React.createElement(CircleFill, null) : /*#__PURE__*/React.createElement(SquareFill, null);
    return /*#__PURE__*/React.createElement(CSSMotion, {
      motionName: "fade",
      removeOnLeave: true
    }, function (_ref) {
      var motionClassName = _ref.className;
      var childNode = children || renderDefaultChild;
      return /*#__PURE__*/React.createElement("div", null, cloneElement(childNode, function (_ref2) {
        var cln = _ref2.cln;
        return {
          className: classNames(motionClassName, cln, "".concat(backTopCls, "-child"))
        };
      }));
    });
  };

  return /*#__PURE__*/React.createElement(React.Fragment, null, visible && /*#__PURE__*/React.createElement("div", {
    className: lastCls,
    onClick: handleScrollTop,
    style: positionSty,
    ref: ref
  }, renderChildrenDom()));
};

Backtop.displayName = 'Backtop';
Backtop.defaultProps = {
  bottom: 50,
  right: 50,
  shape: 'square',
  visibilityHeight: 100
};
export default Backtop;