import React from 'react';
import AntdSpin from 'antd/es/spin';
import Lottie from 'react-lottie';
import cls from 'classnames';

import { ConfigConsumer, getPrefixCls as getPreCls } from '../config-provider';
import animationData from './loading.json';
import './index.less';

const indicator = (
  <div className={`${getPreCls('spin')}-hexagon`}>
    <Lottie isClickToPauseDisabled options={{ loop: true, animationData }} />
  </div>
);

const Spin = props => {
  const {
    prefixCls: customizePrefixCls,
    size,
    className,
    ...restProps
  } = props;

  return (
    <ConfigConsumer>
      {({ getPrefixCls }) => {
        const prefixCls = getPrefixCls('spin', customizePrefixCls);

        return (
          <AntdSpin
            indicator={indicator}
            prefixCls={prefixCls}
            size={size}
            className={cls(className, {
              [`${prefixCls}-xs`]: size === 'xsmall',
            })}
            {...restProps}
          />
        );
      }}
    </ConfigConsumer>
  );
};

// 设置全局默认 Spin 元素
AntdSpin.setDefaultIndicator(indicator);

export default Spin;