import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
import { useContext, useMemo } from 'react';
import clsx from 'clsx';
import { addUnit, getSizeStyle } from '../utils';
import ConfigProviderContext from '../config-provider/ConfigProviderContext';

const SpinIcon = ({
  bem
}) => _jsx(_Fragment, {
  children: Array(12).fill(null) // eslint-disable-next-line react/no-array-index-key
  .map((_, index) => _jsx("i", {
    className: clsx(bem('line', String(index + 1)))
  }, index))
});

const CircularIcon = ({
  bem
}) => _jsx("svg", Object.assign({
  className: clsx(bem('circular')),
  viewBox: "25 25 50 50"
}, {
  children: _jsx("circle", {
    cx: "50",
    cy: "50",
    r: "20",
    fill: "none"
  })
}));

const BallIcon = ({
  bem
}) => _jsxs("div", Object.assign({
  className: clsx(bem('ball'))
}, {
  children: [_jsx("div", {}), _jsx("div", {}), _jsx("div", {})]
}));

const Icon = bem => ({
  spinner: _jsx(SpinIcon, {
    bem: bem
  }),
  circular: _jsx(CircularIcon, {
    bem: bem
  }),
  ball: _jsx(BallIcon, {
    bem: bem
  })
});

const Loading = props => {
  const {
    prefixCls,
    createNamespace
  } = useContext(ConfigProviderContext);
  const [bem] = createNamespace('loading', prefixCls);
  const {
    className,
    type,
    vertical,
    color,
    size,
    textColor,
    children,
    textSize
  } = props;
  const spinnerStyle = useMemo(() => Object.assign({
    color
  }, getSizeStyle(size)), [color, size]);

  const renderText = () => {
    if (children) {
      return _jsx("span", Object.assign({
        className: clsx(bem('text')),
        style: {
          fontSize: addUnit(textSize),
          color: textColor !== null && textColor !== void 0 ? textColor : color
        }
      }, {
        children: children
      }));
    }

    return null;
  };

  return _jsxs("div", Object.assign({
    className: clsx(className, bem([type, {
      vertical
    }])),
    style: props.style
  }, {
    children: [_jsx("span", Object.assign({
      className: clsx(bem('spinner', type)),
      style: spinnerStyle
    }, {
      children: Icon(bem)[type]
    })), renderText()]
  }));
};

Loading.defaultProps = {
  type: 'circular'
};
export default Loading;