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

export interface BadgeProps extends StyledProps {
  /**
   * 颜色主题
   *
   * @default "default"
   */
  theme?: "default" | "success" | "warning" | "danger";

  /**
   * 是否为深色背景
   * @default false
   */
  dark?: boolean;

  /**
   * 是否展示为点的样式
   * @default false
   */
  dot?: boolean;

  /**
   * 是否展示为环的样式
   * @default false
   */
  ring?: boolean;

  /**
   * 徽章中内容
   */
  children?: React.ReactNode;
}

export const Badge = React.forwardRef(function Badge(
  {
    theme = "default",
    dot,
    ring,
    dark,
    children,
    className,
    ...props
  }: BadgeProps,
  ref: React.Ref<HTMLSpanElement>
) {
  const { classPrefix } = useConfig();
  const classSuffix = dark || dot || ring ? "-dark" : "";
  return (
    <span
      ref={ref}
      className={classNames(`${classPrefix}-badge`, className, {
        [`${classPrefix}-badge--radius`]: !dot && !ring,
        [`${classPrefix}-badge--dot`]: dot && !ring,
        [`${classPrefix}-badge--ring`]: ring,
        [`is-blue${classSuffix}`]: theme === "default",
        [`is-success${classSuffix}`]: theme === "success",
        [`is-warning${classSuffix}`]: theme === "warning",
        // @ts-ignore
        [`is-error${classSuffix}`]: theme === "danger" || theme === "error",
      })}
      {...props}
    >
      {children}
    </span>
  );
});

Badge.displayName = "Badge";