import * as React from "react";
import { Image as RnImage, ImageStyle } from "react-native";
import * as R from "ramda";

import { useImageSource } from "./hooks";

type Source = {
  uri: string;
};

type Props = Record<string, unknown> & {
  style: ImageStyle;
  uri?: string;

  placeholderImage?: string;
  entry?: ZappEntry;
  withDimensions: (source: Source) => Source;
};

function Image({
  style,
  uri,
  placeholderImage,
  entry,
  withDimensions,
  ...otherProps
}: Props) {
  const source = useImageSource({ uri, entry, otherProps });

  const updatedSource = source ? withDimensions(source) : { uri: "" };

  return (
    <RnImage
      defaultSource={placeholderImage || null}
      style={style}
      source={updatedSource}
      {...R.omit(["source", "placeholderImage"], otherProps)}
    />
  );
}

export default Image;