import React, { useRef } from 'react';
import { Spin } from 'antd';
import IconFont from "../iconfont";
import useCssVariables from "../../hooks/useCssVariables";
import { getCssNumber } from "../../utils";
import "./index.less";
var PisellLoading = function PisellLoading(props) {
  var children = props.children,
    fullscreen = props.fullscreen,
    mask = props.mask,
    loading = props.loading,
    delay = props.delay;
  var ref = useRef(null);
  var _ref = mask || {},
    _ref$backgroundColor = _ref.backgroundColor,
    backgroundColor = _ref$backgroundColor === void 0 ? '#fff' : _ref$backgroundColor,
    _ref$width = _ref.width,
    width = _ref$width === void 0 ? '100%' : _ref$width,
    _ref$height = _ref.height,
    height = _ref$height === void 0 ? '100%' : _ref$height;
  useCssVariables({
    variables: {
      '--pisell-loading-mask-opacity': mask ? '1' : '0',
      '--pisell-loading-bg-color': fullscreen && !mask ? 'transparent' : backgroundColor,
      '--pisell-loading-bg-width': getCssNumber(width) || '100%',
      '--pisell-loading-bg-height': getCssNumber(height) || '100%',
      '--pisell-loading-bg-border-radius': width !== '100%' || height !== '100%' ? '12px' : '0px'
    },
    ref: ref
  });
  return /*#__PURE__*/React.createElement("div", {
    ref: ref,
    className: 'pisell-loading-wrapper'
  }, /*#__PURE__*/React.createElement(Spin, {
    fullscreen: fullscreen,
    delay: delay,
    spinning: loading,
    indicator: /*#__PURE__*/React.createElement(IconFont, {
      type: 'pisell2-loader2',
      style: {
        fontSize: 40
      },
      spin: true
    })
  }, children));
};
export default PisellLoading;