import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
import React, { useContext } from 'react';
import classnames from 'classnames';
import { ConfigContext } from '../config-provider/context';
import { isValidElement, cloneElement } from '../utils/ReactNodeValidate'; // import { Icons } from '../components';
// @ts-ignore

import logo from './gif/loading-basic-blue.gif';

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 = _objectWithoutProperties(_ref, ["className", "size", "tip", "delay", "spinning", "indicator", "direction"]);

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

  var spinPrefix = getPrefixClassName('spin');

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

  var spinSizeCls = classnames(spinPrefix, (_classnames = {}, _defineProperty(_classnames, "".concat(spinPrefix, "-small"), size === 'small'), _defineProperty(_classnames, "".concat(spinPrefix, "-default"), size === 'default'), _defineProperty(_classnames, "".concat(spinPrefix, "-large"), size === 'large'), _classnames), className);
  var directionCls = classnames((_classnames2 = {}, _defineProperty(_classnames2, "".concat(spinPrefix, "-row"), direction === 'row'), _defineProperty(_classnames2, "".concat(spinPrefix, "-col"), direction === 'col'), _classnames2), className);
  React.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 (isValidElement(indicator)) {
      return cloneElement(indicator, _objectSpread(_objectSpread({}, restProps), {}, {
        className: spinSizeCls
      }));
    }

    var sizeSty = size === 'small' ? '16px' : size === 'default' ? '20px' : '32px';
    return /*#__PURE__*/React.createElement("div", {
      className: classnames(spinSizeCls)
    }, /*#__PURE__*/React.createElement("img", {
      src: logo,
      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.createElement("div", {
      className: classnames(direction === 'col' ? "".concat(spinPrefix, "-flex  ") : "".concat(spinPrefix, "-cen"), children ? "".concat(spinPrefix, "-child-spin") : '')
    }, indicatorRender(), tip && /*#__PURE__*/React.createElement("div", {
      className: classnames(spinSizeCls, directionCls),
      style: {
        lineHeight: lingHeight
      }
    }, ' ', tip));
  }; // 渲染child


  var renderChild = function renderChild() {
    var children = restProps.children;
    var containerClassName = classnames("".concat(spinPrefix, "-container"), _defineProperty({}, "".concat(spinPrefix, "-blur"), currentSpinning));
    return /*#__PURE__*/React.createElement("div", {
      className: containerClassName,
      key: "container"
    }, children);
  };

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

export default Spin;