import React, { useContext } from 'react';
import { Spin as OldSpin, SpinProps, ConfigProvider } from 'antd';
import classNames from 'classnames';
import { Icon } from '../Icon';
import './index.less';
import { translate } from '../utils/index';

const ICON = <Icon iconName="Loading" className="anticon-spin" />;

interface BtriSpinProps extends SpinProps {
  onlyText?: boolean;
  direction?: 'horizontal';
}

function Spin(props: BtriSpinProps) {
  // 为了与 antd 的生态保持兼容性，我们要求必须要使用 `.@{ant-prefix}` 变量来生成类名
  const { getPrefixCls } = useContext(ConfigProvider.ConfigContext);
  const prefixCls = getPrefixCls('btri-spin');
  const { locale } = useContext(ConfigProvider.ConfigContext);
  const TIP = translate('packages.base.src.Spin.index.加载中', locale?.locale);
  const { onlyText, tip = TIP, direction } = props;
  const cls = classNames(`${prefixCls}`, {
    [`${prefixCls}-${direction}`]: direction === 'horizontal',
  });
  return (
    <OldSpin
      {...props}
      indicator={onlyText ? null : props.indicator || ICON}
      tip={onlyText ? TIP : tip}
      className={cls}
    ></OldSpin>
  );
}

export { Spin };