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

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

  const xhrRef = useRef(null);

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

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

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

  function handleError() {
    setStatus("error");
    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);
  }

  function getBase64(file) {
    const reader = new FileReader();
    reader.onloadend = () => {
      setImage(reader.result);
    };
    reader.readAsDataURL(file);
  }

  return (
    <Form.Control status={status} message="请上传 png 格式文件，大小 1MB 以内">
      <Upload
        action="https://run.mocky.io/v3/68ed7204-0487-4135-857d-0e4366b2cfad"
        accept="image/png"
        maxSize={1024 * 1024}
        onStart={handleStart}
        onProgress={handleProgress}
        onSuccess={handleSuccess}
        onError={handleError}
        beforeUpload={beforeUpload}
      >
        {({ open }) => (
          <Upload.Image
            filename={file ? file.name : <Text theme="weak">还未选择图片</Text>}
            image={
              file
                ? image
                : "//imgcache.qq.com/open_proj/proj_qcloud_v2/tea-style/dist/assets/image/upload-thumb.png"
            }
            percent={percent}
            description={
              file && (
                <>
                  <p>文件大小：{Math.floor(file.size / 1024)}K</p>
                  <p>上传日期：-</p>
                </>
              )
            }
            button={
              status === "validating" ? (
                <Button onClick={handleAbort}>取消上传</Button>
              ) : (
                <>
                  <Button onClick={open}>
                    {status ? "重新上传" : "选择图片"}
                  </Button>
                  {file && (
                    <Button
                      type="link"
                      style={{ marginLeft: 8 }}
                      onClick={handleAbort}
                    >
                      删除
                    </Button>
                  )}
                </>
              )
            }
          />
        )}
      </Upload>
    </Form.Control>
  );
}