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

import { useImageSource } from "./hooks";

type Source = {
  uri: string;
};

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

  entry?: ZappEntry | ZappFeed;
  withDimensions: (source: Source) => Source;
};

const MemoizedImage = React.memo(RnImage, equals);

function Image({
  style,
  uri,
  placeholderImage,
  entry,
  withDimensions,
  ...otherProps
}: Props) {
  const [error, setErrorState] = React.useState(null);

  const source = useImageSource({ uri, entry, otherProps });

  React.useEffect(() => {
    // reset error state on URI change as the error is referencing previous uri
    setErrorState(null);
  }, [uri]);

  const shouldRenderImg = source && !error;

  const _source = shouldRenderImg
    ? withDimensions(source)
    : { uri: placeholderImage };

  return (
    <MemoizedImage
      key={_source?.uri || "no-image"}
      style={style as ImageStyle}
      onError={React.useCallback(() => setErrorState(true), [])}
      // as we have defaults as "" for placeholder image, we need to pass undefined to source to not throw warnings
      source={_source?.uri ? _source : undefined}
      {...omit(["source"], otherProps)}
    />
  );
}

export default Image;