import _inheritsLoose from "@babel/runtime/helpers/inheritsLoose";
import _Upload from "@alifd/next/es/upload";
import _Button from "@alifd/next/es/button";
import _Icon from "@alifd/next/es/icon";
import _Message from "@alifd/next/es/message";
import _asyncToGenerator from "@babel/runtime/helpers/asyncToGenerator";
import _regeneratorRuntime from "@babel/runtime/regenerator";
import React, { Component, useEffect, useState } from "react";
import { hideMoreText } from "@cverse/core-lib-beta";
import { UploadBatch, fileNameCompare } from "./UploadBatch";
import "./index.less";
import { t } from "../../../src/locale";
var _ = require('lodash');
var CUploadBatchSetter = function CUploadBatchSetter(props) {
  var uploadBatch = new UploadBatch('617');
  var value = props.value,
    onChange = props.onChange;
  var _useState = useState(value || []),
    imgList = _useState[0],
    setImgList = _useState[1];
  var _useState2 = useState(false),
    loading = _useState2[0],
    setLoading = _useState2[1];
  var uploadImage = /*#__PURE__*/function () {
    var _ref = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee(file, index) {
      var result;
      return _regeneratorRuntime.wrap(function _callee$(_context) {
        while (1) switch (_context.prev = _context.next) {
          case 0:
            _context.next = 2;
            return uploadBatch.uploadImage(file);
          case 2:
            result = _context.sent;
            if (result) {
              setImgList(imgList[index].url = result);
              _Message.success(t('tool-video.key_YlYhgW2xsucc'));
            } else {
              _Message.success(t('tool-video.key_YlYhW2failed'));
            }
            setLoading(false);
          case 5:
          case "end":
            return _context.stop();
        }
      }, _callee);
    }));
    return function uploadImage(_x, _x2) {
      return _ref.apply(this, arguments);
    };
  }();
  var onSelect = /*#__PURE__*/function () {
    var _ref2 = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee2(files) {
      var sortArr, nameArr, result, urlArr;
      return _regeneratorRuntime.wrap(function _callee2$(_context2) {
        while (1) switch (_context2.prev = _context2.next) {
          case 0:
            _context2.prev = 0;
            setLoading(true);
            sortArr = files.sort(function (a, b) {
              return fileNameCompare(a.name, b.name);
            });
            nameArr = sortArr.map(function (item) {
              return {
                url: '',
                name: item.name.replace(/\.png$/, '')
              };
            });
            _context2.next = 6;
            return uploadBatch.uploadImage(sortArr);
          case 6:
            result = _context2.sent;
            if (result) {
              urlArr = nameArr.map(function (item, index) {
                return {
                  url: result[index],
                  name: item.name
                };
              }); // const deepCopy = _.cloneDeep(urlArr);
              setImgList([].concat(imgList, urlArr));
              _Message.success(t('tool-video.key_YlYhgW2xsucc'));
            } else {
              _Message.error(t('tool-video.key_YlYhW2failed'));
            }
            setLoading(false);
            _context2.next = 15;
            break;
          case 11:
            _context2.prev = 11;
            _context2.t0 = _context2["catch"](0);
            setLoading(false);
            console.error('Error during file upload:', _context2.t0);
            // 处理错误逻辑
          case 15:
          case "end":
            return _context2.stop();
        }
      }, _callee2, null, [[0, 11]]);
    }));
    return function onSelect(_x3) {
      return _ref2.apply(this, arguments);
    };
  }();
  var moveUp = function moveUp(index) {
    if (index > 0 && index < imgList.length) {
      var newImgList = [].concat(imgList); // 创建副本
      var temp = newImgList[index - 1];
      newImgList[index - 1] = newImgList[index];
      newImgList[index] = temp;
      setImgList(newImgList);
    }
  };
  var moveDown = function moveDown(index) {
    if (index >= 0 && index < imgList.length - 1) {
      var newImgList = [].concat(imgList); // 创建副本
      var temp = newImgList[index + 1];
      newImgList[index + 1] = newImgList[index];
      newImgList[index] = temp;
      setImgList(newImgList);
    }
  };
  useEffect(function () {
    onChange(imgList);
  }, [imgList]);
  return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(_Upload, {
    multiple: true,
    autoUpload: false,
    onSelect: onSelect
  }, /*#__PURE__*/React.createElement(_Button, {
    className: "upLoad",
    loading: loading
  }, !loading && /*#__PURE__*/React.createElement(_Icon, {
    type: "upload"
  }))), /*#__PURE__*/React.createElement("div", null, imgList.length > 0 && /*#__PURE__*/React.createElement("div", {
    className: "video-frames-body"
  }, imgList.map(function (item, index) {
    return /*#__PURE__*/React.createElement("div", {
      className: "body-item",
      style: {
        cursor: 'pointer'
      }
    }, /*#__PURE__*/React.createElement("img", {
      src: item.url,
      alt: ""
    }), /*#__PURE__*/React.createElement("span", null, hideMoreText(item.name, 4, 6) || index + 1), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(_Icon, {
      type: "arrow-up",
      onClick: function onClick() {
        moveUp(index);
      },
      size: 'small'
    }), /*#__PURE__*/React.createElement(_Icon, {
      type: "arrow-down",
      onClick: function onClick() {
        moveDown(index);
      },
      size: 'small'
    })), /*#__PURE__*/React.createElement(_Icon, {
      type: "close",
      size: 'small',
      onClick: function onClick() {
        setImgList(imgList.filter(function (value) {
          return value != item;
        }));
      }
    }));
  })), imgList.length > 0 && /*#__PURE__*/React.createElement("div", {
    className: "clear"
  }, /*#__PURE__*/React.createElement("span", {
    className: "num"
  }, t('tool-video.key_YlYhW2fitotal'), " ", imgList.length, " ", t('tool-video.key_YlYhW2fizhang')), /*#__PURE__*/React.createElement("span", {
    className: "num"
  }, t('tool-video.key_YlYhW2cdelerr'), " ", imgList.filter(function (item) {
    return item === null;
  }).length, " ", t('tool-video.key_YlYhW2fizhang')), /*#__PURE__*/React.createElement(_Button, {
    onClick: function onClick() {
      setImgList([]);
    }
  }, t('tool-video.key_YlYhW2ficlear')))));
};
var _default = /*#__PURE__*/function (_Component) {
  function _default() {
    return _Component.apply(this, arguments) || this;
  }
  _inheritsLoose(_default, _Component);
  var _proto = _default.prototype;
  _proto.render = function render() {
    return /*#__PURE__*/React.createElement(CUploadBatchSetter, this.props);
  };
  return _default;
}(Component);
export { _default as default };