import { useMemo, useState } from "react";
import { Image } from "react-native";
import { ActivityIndicator } from "react-native-paper";

const ImageLoader = ({ style, source, ...props }) => {
  const [loading, setLoading] = useState(true);

  const handleLoadStart = () => {
    setLoading(true);
  };

  const handleLoadEnd = () => {
    setLoading(false);
  };

  const handleLoad = () => {
    setLoading(false);
  };

  const memorizedImage = useMemo(
    () => (
      <Image
        {...props}
        style={style}
        source={source}
        //onLoadStart={handleLoadStart}
        onLoadEnd={handleLoadEnd}
        onLoad={handleLoad}
      />
    ),
    [source]
  );
  if (loading)
    return (
      <>
        <ActivityIndicator
          style={{
            ...style,
            position: "absolute",
            alignSelf: "center",
            margin: 12,
          }}
        />
        {memorizedImage}
      </>
    );
  return memorizedImage;
};

export default ImageLoader;