import _Icon from "@alifd/next/es/icon";
import _asyncToGenerator from "@babel/runtime/helpers/asyncToGenerator";
import _regeneratorRuntime from "@babel/runtime/regenerator";
// ImageUpload.tsx
import React, { useState, useRef } from 'react';
import { ImageUploadQuery } from "@cverse/core-lib-vue-beta";
import "./index.less";
var ImageUpload = function ImageUpload(_ref) {
  var onUpload = _ref.onUpload,
    value = _ref.value;
  var _useState = useState(value || null),
    image = _useState[0],
    setImage = _useState[1]; // Use value prop
  var _useState2 = useState(false),
    loading = _useState2[0],
    setLoading = _useState2[1];
  var imageUploadQuery = new ImageUploadQuery({
    appId: '617'
  });
  var inputRef = useRef(null);
  var imgIcon = 'https://s3.ap-east-1.amazonaws.com/res.chaosverse.io/test/230725/c3eac31eb3034411bbcf7f3d9379a834.svg';
  var delectIcon = 'https://s3.ap-east-1.amazonaws.com/res.chaosverse.io/test/230725/8cfc4b66b7324ea68c0ae127b83d84b4.png';
  var handleImageChange = function handleImageChange(event) {
    var _event$target$files;
    setLoading(true); // 开始加载
    var file = (_event$target$files = event.target.files) === null || _event$target$files === void 0 ? void 0 : _event$target$files[0];
    if (file) {
      var reader = new FileReader();
      reader.onloadend = /*#__PURE__*/_asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee() {
        var result;
        return _regeneratorRuntime.wrap(function _callee$(_context) {
          while (1) switch (_context.prev = _context.next) {
            case 0:
              _context.next = 2;
              return imageUploadQuery.uploadImage(file);
            case 2:
              result = _context.sent;
              setImage(result);
              onUpload(result); // 将上传的图片传递给父组件
              setLoading(false); // 开始加载
            case 6:
            case "end":
              return _context.stop();
          }
        }, _callee);
      }));
      reader.readAsDataURL(file);
    }
  };
  React.useEffect(function () {
    setImage(value || null);
  }, [value]);
  return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("input", {
    type: "file",
    accept: "image/*",
    onChange: handleImageChange,
    style: {
      display: 'none'
    },
    ref: inputRef
  }), /*#__PURE__*/React.createElement("div", {
    className: "upload-image",
    onClick: function onClick() {
      var _inputRef$current;
      return (_inputRef$current = inputRef.current) === null || _inputRef$current === void 0 ? void 0 : _inputRef$current.click();
    }
  }, loading ? /*#__PURE__*/React.createElement(_Icon, {
    type: "loading"
  }) : image ? /*#__PURE__*/React.createElement("img", {
    src: image,
    alt: "Uploaded",
    style: {
      width: '56px',
      height: '56px',
      objectFit: 'cover'
    }
  }) : /*#__PURE__*/React.createElement("img", {
    src: imgIcon,
    style: {
      width: '20px',
      height: '20px'
    }
  }), image && /*#__PURE__*/React.createElement("img", {
    src: delectIcon,
    className: "delectIcon",
    onClick: function onClick(e) {
      e.stopPropagation();
      setImage(null);
    }
  })));
};
export default ImageUpload;