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

export interface ImageProps extends StyledProps {
  /**
   * 文件名
   */
  filename?: React.ReactNode;

  /**
   * 预览图
   */
  image?: string;

  /**
   * 上传进度
   */
  percent?: number;

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

  /**
   * 按钮区域内容
   */
  button?: React.ReactNode;
}

export const Image = React.forwardRef(function Image(
  {
    filename,
    image,
    percent,
    description,
    button,
    className,
    ...props
  }: ImageProps,
  ref: React.Ref<HTMLDivElement>
) {
  const { classPrefix } = useConfig();
  return (
    <div
      ref={ref}
      className={classNames(`${classPrefix}-form-upload-img`, className)}
      {...props}
    >
      <div className={`${classPrefix}-form-upload__inner`}>
        <div className={`${classPrefix}-form-upload__box`}>
          {image && (
            <div className={`${classPrefix}-form-upload__thumb`}>
              <ImagePreview
                className={`${classPrefix}-form-upload__preview`}
                previewSrc={image}
                src={image}
              />
            </div>
          )}
          <div className={`${classPrefix}-form-upload__info`}>
            {filename && (
              <div className={`${classPrefix}-form-upload__file`}>
                <span className={`${classPrefix}-text`}>{filename}</span>
                {(percent || percent === 0) && (
                  <span className={`${classPrefix}-form__help-text--inline`}>
                    {Math.floor(percent)}%
                  </span>
                )}
              </div>
            )}
            <div
              className={`${classPrefix}-form-upload__intro ${classPrefix}-text-weak`}
            >
              {description}
            </div>
            <div className={`${classPrefix}-form-upload__btn`}>{button}</div>
          </div>
        </div>
      </div>
    </div>
  );
});

Image.displayName = "UploadImage";