import useTranslationOriginal from "../../../../hooks/useTranslationOriginal.js";
import React, { useMemo } from "react";
import { isArr, isString } from "@pisell/utils";
import { Image, Space } from "antd";
import fallback from "./fallback.png";
import "./ReadPretty.less";
//#region src/components/dataSourceComponents/fields/Upload/ReadPretty.tsx
const UploadReadPretty = (props) => {
	const { value, enableMultilingual } = props;
	const translationOriginal = useTranslationOriginal();
	const normalizedValue = useMemo(() => {
		if (!value) return [];
		let processedValue = isArr(value) ? value : [value];
		processedValue = processedValue.map((item) => {
			if (!item) return null;
			if (isString(item)) return item;
			return translationOriginal(item);
		});
		return processedValue.filter((item) => !!item);
	}, [
		value,
		enableMultilingual,
		translationOriginal
	]);
	if (!normalizedValue.length) return null;
	return /* @__PURE__ */ React.createElement(Space, null, normalizedValue.map((item, index) => /* @__PURE__ */ React.createElement(Image, {
		key: `${String(item)}-${index}`,
		className: "pisell-upload-read-pretty",
		src: String(item),
		width: 100,
		height: 100,
		fallback,
		preview: { maskClassName: "pisell-upload-read-pretty-mask" }
	})));
};
//#endregion
export { UploadReadPretty as default };
