"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;
var _react = _interopRequireWildcard(require("react"));
var _classnames = _interopRequireDefault(require("classnames"));
var _image = _interopRequireDefault(require("../image"));
var _spinLoading = _interopRequireDefault(require("../spin-loading"));
var _configProvider = require("../config-provider");
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
const classPrefix = `adm-image-uploader`;
const PreviewItem = props => {
  const {
    locale
  } = (0, _configProvider.useConfig)();
  const {
    url,
    file,
    deletable,
    deleteIcon,
    onDelete,
    imageFit
  } = props;
  const src = (0, _react.useMemo)(() => {
    if (url) {
      return url;
    }
    if (file) {
      return URL.createObjectURL(file);
    }
    return '';
  }, [url, file]);
  (0, _react.useEffect)(() => {
    return () => {
      if (file) URL.revokeObjectURL(src);
    };
  }, [src, file]);
  function renderLoading() {
    return props.status === 'pending' && _react.default.createElement("div", {
      className: `${classPrefix}-cell-mask`
    }, _react.default.createElement("span", {
      className: `${classPrefix}-cell-loading`
    }, _react.default.createElement(_spinLoading.default, {
      color: 'white'
    }), _react.default.createElement("span", {
      className: `${classPrefix}-cell-mask-message`
    }, locale.ImageUploader.uploading)));
  }
  function renderDelete() {
    return deletable && _react.default.createElement("span", {
      className: `${classPrefix}-cell-delete`,
      onClick: onDelete
    }, deleteIcon);
  }
  return _react.default.createElement("div", {
    className: (0, _classnames.default)(`${classPrefix}-cell`, props.status === 'fail' && `${classPrefix}-cell-fail`)
  }, _react.default.createElement(_image.default, {
    className: `${classPrefix}-cell-image`,
    src: src,
    fit: imageFit,
    onClick: props.onClick
  }), renderLoading(), renderDelete());
};
var _default = exports.default = PreviewItem;