import { useSelector } from "react-redux";
import { useEffect } from "react";
import { loadFile, useAppDispatch } from "@nimles/react-redux";
import React from "react";
import styled from "@emotion/styled";
const imageBaseUrl = "https://media.nimles.com/file";
const StyledImage = styled.img `
  max-width: 100%;
  background: ${({ background }) => background};
`;
export const Image = ({ value, uri, image, background, width, }) => {
    var _a;
    const dispatch = useAppDispatch();
    const images = 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"}`;
    }
    useEffect(() => {
        if (imageId && !source) {
            dispatch(loadFile(imageId));
        }
    }, [imageId, source]);
    return source ? <StyledImage src={source} background={background}/> : null;
};
//# sourceMappingURL=Image.jsx.map