import React, { useMemo } from 'react';
import { Image, Space } from 'antd';
import { isArr, isString } from '@pisell/utils';
import useTranslationOriginal from "../../../../hooks/useTranslationOriginal";

// @ts-ignore
import fallback from "./fallback.png";
import "./ReadPretty.less";
var UploadReadPretty = function UploadReadPretty(props) {
  var value = props.value,
    enableMultilingual = props.enableMultilingual;
  var translationOriginal = useTranslationOriginal();
  var normalizedValue = useMemo(function () {
    if (!value) return [];
    var processedValue = isArr(value) ? value : [value];
    processedValue = processedValue.map(function (item) {
      if (!item) {
        return null;
      }
      if (isString(item)) {
        return item;
      }
      return translationOriginal(item);
    });
    return processedValue.filter(function (item) {
      return !!item;
    });
  }, [value, enableMultilingual, translationOriginal]);
  if (!normalizedValue.length) {
    return null;
  }
  return /*#__PURE__*/React.createElement(Space, null, normalizedValue.map(function (item, index) {
    return /*#__PURE__*/React.createElement(Image, {
      key: "".concat(String(item), "-").concat(index),
      className: "pisell-upload-read-pretty",
      src: String(item),
      width: 100,
      height: 100,
      fallback: fallback,
      preview: {
        maskClassName: 'pisell-upload-read-pretty-mask'
      }
    });
  }));
};
export default UploadReadPretty;