import classNames from "classnames";
import React, { Ref } from "react";
import { useConfig } from "../_util/config-context";
import { StyledProps } from "../_type";
import { createRocket } from "../_util/create-rocket";
import { forwardRefWithStatics } from "../_util/forward-ref-with-statics";

export interface MetricsBoardProps extends StyledProps {
  /**
   * 标题
   */
  title: React.ReactNode;

  /**
   * 统计数值
   */
  value: React.ReactNode;

  /**
   * 统计数值单位
   */
  unit?: React.ReactNode;

  /**
   * 统计信息
   */
  infos?: React.ReactNode[];

  /**
   * 点击回调
   *
   * **当传递该回调函数后，组件会变为可点击的样式**
   */
  onClick?: (event: React.MouseEvent<HTMLDivElement>) => void;
}

export const MetricsBoard = forwardRefWithStatics(
  (
    {
      title,
      value,
      unit,
      infos = [],
      onClick,
      className,
      style,
    }: MetricsBoardProps,
    ref: Ref<HTMLDivElement>
  ) => {
    const { classPrefix } = useConfig();
    const hasOnClick = typeof onClick === "function";
    return (
      <div
        className={classNames(`${classPrefix}-metrics-board`, className, {
          [`${classPrefix}-metrics-board--link`]: hasOnClick,
        })}
        style={style}
        onClick={hasOnClick ? onClick : () => null}
        ref={ref}
      >
        <div className={`${classPrefix}-metrics-board__header`}>
          <div className={`${classPrefix}-metrics-board__header-title`}>
            {title}
          </div>
        </div>
        <div className={`${classPrefix}-metrics-board__body`}>
          <div className={`${classPrefix}-metrics-board__value`}>
            <span className={`${classPrefix}-metrics-board__number`}>
              {value}
            </span>
            <span className={`${classPrefix}-metrics-board__unit`}>
              {" "}
              {unit}
            </span>
          </div>
          <div className={`${classPrefix}-metrics-board__info`}>
            {infos.map((info, index) => (
              <div
                className={`${classPrefix}-metrics-board__info-item`}
                key={index}
              >
                {info}
              </div>
            ))}
          </div>
        </div>
      </div>
    );
  },
  {
    InfoLabel: createRocket(
      "MetricsBoardInfoLabel",
      "label.@{prefix}-metrics-board__info-label"
    ),
    InfoKey: createRocket(
      "MetricsBoardInfoKey",
      "label.@{prefix}-metrics-board__info-key"
    ),
  }
);

MetricsBoard.displayName = "MetricsBoard";