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

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

  /**
   * 预览图，仅在 `filename` 不为空时展示
   */
  image?: string;

  /**
   * 上传进度，仅在 `filename` 不为空时展示
   */
  percent?: number;

  /**
   * 文件描述，仅在 `filename` 不为空时展示
   */
  description?: React.ReactNode;

  /**
   * 按钮区域内容，仅在 `filename` 不为空时展示
   */
  button?: React.ReactNode;

  /**
   * `filename` 为空时展示内容，此时支持拖拽上传
   */
  children?: React.ReactNode;
}

export const Dragger = React.forwardRef(function Dragger(
  {
    filename,
    image,
    percent,
    button,
    description,
    children,
    className,
    ...props
  }: DraggerProps,
  ref: React.Ref<HTMLDivElement>
) {
  const { classPrefix } = useConfig();
  const { isDragging, getDraggerProps } = useContext(UploadContext);

  if (filename) {
    return (
      <div
        ref={ref}
        className={classNames(`${classPrefix}-form-upload-drag`, 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`}>
              <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>
    );
  }

  return (
    <div
      ref={ref}
      className={classNames(`${classPrefix}-form-upload-drag`, className, {
        [`${classPrefix}-form-upload-drag--drag`]: isDragging,
      })}
      {...props}
    >
      <div
        {...getDraggerProps({ className: `${classPrefix}-form-upload__inner` })}
      >
        <Text
          theme="text"
          className={classNames(`${classPrefix}-text__upload-drag`, {
            [`${classPrefix}-text__upload-drag--hover`]: isDragging,
          })}
          parent="div"
        >
          {children}
        </Text>
      </div>
    </div>
  );
});

Dragger.displayName = "UploadDragger";