import { useContext, useEffect, useState } from "react";
import ImageElement from "@arcgis/core/layers/support/ImageElement.js";
import Graphic from "@arcgis/core/Graphic";
import { MapLayerContext, MapMediaLayerContext } from "./MapViewContext";

export const MapImage = (graphicProperties: __esri.ImageElementProperties) => {
  const { imagesLayer } = useContext(MapMediaLayerContext);
  const [image, setImage] = useState<__esri.ImageElement | undefined>();

  useEffect(() => {
    const imagePoint = new ImageElement(graphicProperties);

    setImage(imagePoint);
  }, [graphicProperties, imagesLayer]);

  useEffect(() => {
    if (!image || !imagesLayer) return;
    imagesLayer.source.elements.add(image);
  }, [image, imagesLayer]);

  return <></>;
};