"use strict";

var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;

var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));

var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));

var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));

var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));

var _react = _interopRequireWildcard(require("react"));

var _classnames4 = _interopRequireDefault(require("classnames"));

var _context = require("../config-provider/context");

var _ReactNodeValidate = require("../utils/ReactNodeValidate");

var _loadingBasicBlue = _interopRequireDefault(require("./gif/loading-basic-blue.gif"));

// import { Icons } from '../components';
// @ts-ignore
var Spin = function Spin(_ref) {
  var _classnames, _classnames2;

  var className = _ref.className,
      _ref$size = _ref.size,
      size = _ref$size === void 0 ? 'default' : _ref$size,
      tip = _ref.tip,
      delay = _ref.delay,
      _ref$spinning = _ref.spinning,
      spinning = _ref$spinning === void 0 ? true : _ref$spinning,
      indicator = _ref.indicator,
      _ref$direction = _ref.direction,
      direction = _ref$direction === void 0 ? 'row' : _ref$direction,
      restProps = (0, _objectWithoutProperties2.default)(_ref, ["className", "size", "tip", "delay", "spinning", "indicator", "direction"]);

  var _useContext = (0, _react.useContext)(_context.ConfigContext),
      getPrefixClassName = _useContext.getPrefixClassName;

  var spinPrefix = getPrefixClassName('spin');

  var _React$useState = _react.default.useState(false),
      _React$useState2 = (0, _slicedToArray2.default)(_React$useState, 2),
      currentSpinning = _React$useState2[0],
      setCurrentSpinning = _React$useState2[1];

  var spinSizeCls = (0, _classnames4.default)(spinPrefix, (_classnames = {}, (0, _defineProperty2.default)(_classnames, "".concat(spinPrefix, "-small"), size === 'small'), (0, _defineProperty2.default)(_classnames, "".concat(spinPrefix, "-default"), size === 'default'), (0, _defineProperty2.default)(_classnames, "".concat(spinPrefix, "-large"), size === 'large'), _classnames), className);
  var directionCls = (0, _classnames4.default)((_classnames2 = {}, (0, _defineProperty2.default)(_classnames2, "".concat(spinPrefix, "-row"), direction === 'row'), (0, _defineProperty2.default)(_classnames2, "".concat(spinPrefix, "-col"), direction === 'col'), _classnames2), className);

  _react.default.useEffect(function () {
    var delayTime = setTimeout(function () {
      updateSpin();
    }, delay);
    return function () {
      return clearTimeout(delayTime);
    };
  }, [spinning]); // 更新 spin


  var updateSpin = function updateSpin() {
    if (currentSpinning !== spinning) {
      setCurrentSpinning(spinning);
    }
  }; // 渲染indicator


  var indicatorRender = function indicatorRender() {
    if (indicator) {
      return indicator;
    }

    if ((0, _ReactNodeValidate.isValidElement)(indicator)) {
      return (0, _ReactNodeValidate.cloneElement)(indicator, (0, _objectSpread2.default)((0, _objectSpread2.default)({}, restProps), {}, {
        className: spinSizeCls
      }));
    }

    var sizeSty = size === 'small' ? '16px' : size === 'default' ? '20px' : '32px';
    return /*#__PURE__*/_react.default.createElement("div", {
      className: (0, _classnames4.default)(spinSizeCls)
    }, /*#__PURE__*/_react.default.createElement("img", {
      src: _loadingBasicBlue.default,
      style: {
        width: sizeSty
      },
      alt: "\u52A0\u8F7D\u4E2D\u3002\u3002\u3002\u3002"
    }));
  }; // 渲染spinElement


  var spinElement = function spinElement() {
    var children = restProps.children;
    var lingHeight = '';

    if (size === 'large' && direction === 'col') {
      lingHeight = '32px';
    } else if (size === 'small' && direction === 'col') {
      lingHeight = '16px';
    } else {
      lingHeight = '';
    }

    return /*#__PURE__*/_react.default.createElement("div", {
      className: (0, _classnames4.default)(direction === 'col' ? "".concat(spinPrefix, "-flex  ") : "".concat(spinPrefix, "-cen"), children ? "".concat(spinPrefix, "-child-spin") : '')
    }, indicatorRender(), tip && /*#__PURE__*/_react.default.createElement("div", {
      className: (0, _classnames4.default)(spinSizeCls, directionCls),
      style: {
        lineHeight: lingHeight
      }
    }, ' ', tip));
  }; // 渲染child


  var renderChild = function renderChild() {
    var children = restProps.children;
    var containerClassName = (0, _classnames4.default)("".concat(spinPrefix, "-container"), (0, _defineProperty2.default)({}, "".concat(spinPrefix, "-blur"), currentSpinning));
    return /*#__PURE__*/_react.default.createElement("div", {
      className: containerClassName,
      key: "container"
    }, children);
  };

  return /*#__PURE__*/_react.default.createElement("div", {
    style: {
      position: 'relative'
    }
  }, currentSpinning && spinElement(), renderChild());
};

var _default = Spin;
exports.default = _default;