import React from "react";
import classNames from "classnames";
import { Icon } from "../icon";
import { useTranslation } from "../i18n";
import { StyledProps } from "../_type";
import { useConfig } from "../_util/config-context";

export interface LoadingTipProps extends StyledProps {
  /**
   * 加载文案
   * @default "加载中..."
   */
  loadingText?: React.ReactNode;

  /**
   * 隐藏图标
   * @default false
   */
  hideIcon?: boolean;
}

export const LoadingTip = React.forwardRef(function LoadingTip(
  props: LoadingTipProps,
  ref: React.Ref<HTMLSpanElement>
) {
  const { classPrefix } = useConfig();
  const t = useTranslation();
  const {
    hideIcon,
    className,
    loadingText = t.loadingText,
    ...restProps
  } = props;
  return (
    <span
      ref={ref}
      className={classNames(`${classPrefix}-action-state`, className)}
      {...restProps}
    >
      {!hideIcon && <Icon type="loading" className={`${classPrefix}-mr-2n`} />}
      {typeof loadingText === "string" ? (
        <span
          className={`${classPrefix}-action-state__text`}
          title={loadingText}
        >
          {loadingText}
        </span>
      ) : (
        loadingText
      )}
    </span>
  );
});

LoadingTip.displayName = "LoadingTip";