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

export interface FileProps extends StyledProps {
  /**
   * 文件名
   */
  filename?: string;

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

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

export const File = React.forwardRef(function File(
  { filename, percent, button, className, ...props }: FileProps,
  ref: React.Ref<HTMLDivElement>
) {
  const { classPrefix } = useConfig();
  return (
    <div
      ref={ref}
      className={classNames(`${classPrefix}-form-upload`, className)}
      {...props}
    >
      <div className={`${classPrefix}-form-upload__inner`}>
        <Input readonly placeholder={filename} />
        {(percent || percent === 0) && (
          <span className={`${classPrefix}-form__help-text--inline`}>
            {Math.floor(percent)}%
          </span>
        )}
      </div>
      {button}
    </div>
  );
});

File.displayName = "UploadFile";