"use strict";
var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.Image = void 0;
const react_redux_1 = require("react-redux");
const react_1 = require("react");
const react_redux_2 = require("@nimles/react-redux");
const react_2 = __importDefault(require("react"));
const styled_1 = __importDefault(require("@emotion/styled"));
const imageBaseUrl = 'https://media.nimles.com/file';
const StyledImage = styled_1.default.img `
  max-width: 100%;
  background: ${({ background }) => background};
`;
const Image = ({ value, uri, image, background, width, }) => {
    var _a;
    const dispatch = (0, react_redux_1.useDispatch)();
    const images = (0, react_redux_1.useSelector)(({ files }) => files.values);
    let source;
    let imageId;
    if (image) {
        if (((_a = image.uri) === null || _a === void 0 ? void 0 : _a.indexOf('data')) === 0) {
            source = image.uri;
        }
        else {
            source = `${imageBaseUrl}/${image.tenantId}/${image.id}?width=${width !== null && width !== void 0 ? width : '860'}`;
        }
    }
    else if (value) {
        if (value.indexOf('data') === 0) {
            source = value;
        }
        else if (value.indexOf('http') === 0) {
            source = `${value}?width=${width !== null && width !== void 0 ? width : '860'}`;
        }
        else if (value.indexOf('/') === 0) {
            source = `${imageBaseUrl}${value}?width=${width !== null && width !== void 0 ? width : '860'}`;
        }
        else {
            imageId = value;
            image = images && imageId && images.find((i) => i.id === imageId);
            if (image) {
                source = `${image.uri}?width=${width !== null && width !== void 0 ? width : '860'}`;
            }
        }
    }
    else if (uri) {
        source = `${uri}?width=${width !== null && width !== void 0 ? width : '860'}`;
    }
    (0, react_1.useEffect)(() => {
        if (imageId && !source) {
            dispatch((0, react_redux_2.loadFile)(imageId));
        }
    }, [imageId, source]);
    return source ? <StyledImage src={source} background={background}/> : null;
};
exports.Image = Image;
//# sourceMappingURL=Image.jsx.map