import React, { useState, useRef } from "react";
import { Upload, Button, Form, Modal } from "@tencent/tea-component";

export default function UploadExample() {
  const [file, setFile] = useState(null);
  const [status, setStatus] = useState(null);
  const [percent, setPercent] = useState(null);

  const xhrRef = useRef(null);

  function handleStart(file, { xhr }) {
    setFile(file);
    setStatus("validating");
    xhrRef.current = xhr;
  }

  function handleProgress({ percent }) {
    setPercent(percent);
  }

  function handleSuccess(result) {
    console.log(result);
    setStatus("success");
  }

  function handleError() {
    setStatus("error");
    handleAbort();
    Modal.alert({
      type: "error",
      message: "错误",
      description: "请求服务器失败",
    });
  }

  function beforeUpload(file, fileList, isAccepted) {
    if (!isAccepted) {
      setStatus("error");
    }
    return isAccepted;
  }

  function handleAbort() {
    if (xhrRef.current) {
      xhrRef.current.abort();
    }
    setFile(null);
    setStatus(null);
    setPercent(null);
  }

  return (
    <Form.Control
      status={status}
      message="请上传 png 格式文件，大小 100KB 以内"
    >
      <Upload
        action="https://run.mocky.io/v3/68ed7204-0487-4135-857d-0e4366b2cfad"
        accept="image/png"
        maxSize={100 * 1024}
        onStart={handleStart}
        onProgress={handleProgress}
        onSuccess={handleSuccess}
        onError={handleError}
        beforeUpload={beforeUpload}
      >
        {({ open }) => (
          <Upload.File
            filename={file && file.name}
            percent={percent}
            button={
              status === "validating" ? (
                <Button onClick={handleAbort}>取消上传</Button>
              ) : (
                <>
                  <Button onClick={open}>
                    {status ? "重新上传" : "选择文件"}
                  </Button>
                  {status && (
                    <Button
                      type="link"
                      style={{ marginLeft: 8 }}
                      onClick={handleAbort}
                    >
                      删除
                    </Button>
                  )}
                </>
              )
            }
          />
        )}
      </Upload>
    </Form.Control>
  );
}