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

export interface StatusProps extends StyledProps {
  /**
   * 图标
   *
   * - `blank` - 内容为空
   * - `chart` - 图表为空或异常
   * - `loading` - 加载中
   * - `network` - 网络异常
   * - `no-permission` - 无权限
   * - `pay` - 待续费
   * - `search` - 搜索无结果
   * - `upload` - 图片上传
   *
   * @default "blank"
   */
  icon?:
    | "blank"
    | "chart"
    | "loading"
    | "network"
    | "no-permission"
    | "pay"
    | "search"
    | "upload";

  /**
   * 标题
   */
  title?: React.ReactNode;

  /**
   * 描述
   */
  description?: React.ReactNode;

  /**
   * 操作区
   */
  operation?: React.ReactNode;

  /**
   * 尺寸
   *
   * @default "l"
   */
  size?: "l" | "m" | "s" | "xs";
}

export const Status = React.forwardRef(function Status(
  {
    icon = "blank",
    size = "l",
    title,
    description,
    operation,
    className,
    ...props
  }: StatusProps,
  ref: React.Ref<HTMLDivElement>
) {
  const { classPrefix } = useConfig();
  const isXsSize = size === "xs";
  return (
    <div
      ref={ref}
      className={classNames(`${classPrefix}-status`, `size-${size}`, className)}
      {...props}
    >
      <div className={`${classPrefix}-status__img`}>
        <Icon type={classNames(`status-${icon}`, { "size-s": isXsSize })} />
      </div>
      <div className={`${classPrefix}-status__content`}>
        {title && <h4 className={`${classPrefix}-status__title`}>{title}</h4>}
        <div className={`${classPrefix}-status__detail`}>{description}</div>
      </div>
      <div
        className={classNames(`${classPrefix}-status__operate`, {
          [`${classPrefix}-ml-1n`]: isXsSize,
        })}
      >
        {operation}
      </div>
    </div>
  );
});

Status.displayName = "Status";