import MapView from "https://js.arcgis.com/4.31/@arcgis/core/views/MapView.js";
import ImageryTileLayer from "https://js.arcgis.com/4.31/@arcgis/core/layers/ImageryTileLayer.js";
import MapImageLayer from "https://js.arcgis.com/4.31/@arcgis/core/layers/MapImageLayer.js";
import FeatureLayer from "https://js.arcgis.com/4.31/@arcgis/core/layers/FeatureLayer.js";
import GraphicsLayer from "https://js.arcgis.com/4.31/@arcgis/core/layers/GraphicsLayer.js";
import GroupLayer from "https://js.arcgis.com/4.31/@arcgis/core/layers/GroupLayer.js";
import SketchViewModel from "https://js.arcgis.com/4.31/@arcgis/core/widgets/Sketch/SketchViewModel.js";
import * as reactiveUtils from "https://js.arcgis.com/4.31/@arcgis/core/core/reactiveUtils.js";

const { useRef, useState, useEffect } = React;

const GeometryChooser = ({mapView, layer, onDraw}) => {
  
//   const mainRef = useRef();
  const [svm, setSvm] = useState();
  
  useEffect(() => {
    if(mapView && layer ) {
      console.log('creating');
      let sketchViewModel = new SketchViewModel({
        layer: layer,
        view: mapView,
      });
      sketchViewModel.activeFillSymbol= {
            type: "simple-fill",
            style: "solid",
            color: "black",
            outline: {  // autocasts as new SimpleLineSymbol()
              width: 0.0,
              color: "white"
            }
          };
      
      setSvm(sketchViewModel);
    }
  }, [mapView, layer]);
  
  
//   return <div className="overflow-auto h-96" ref={mainRef}>
  
  return <div className="overflow-auto">
    <button className="btn btn-small btn-fill leader-half icon-ui-edit" onClick={() => {svm.create("polygon")}}>Draw polygon to cut out</button>
    <button className="btn btn-small btn-clear leader-half icon-ui-refresh w-full" onClick={() => {layer.removeAll()}}>Reset</button>
  </div>;
}


const Map = () => {
  const container = useRef();
  const [mapView, setMapView] = useState();
  const [selectedFeatures, setSelectedFeatures] = useState([]);
  const [allOptions, setAllOptions] = useState([]);
  const [graphicsLayer, setGraphicsLayer] = useState();
  

  useEffect(() => {
    if (container.current) {
        
      const graphicsLayer = new GraphicsLayer({});
      reactiveUtils.watch(
        () => graphicsLayer.graphics.length,
        () => {
          if(graphicsLayer.graphics.length > 0) {
            graphicsLayer.blendMode = "destination-in";
          } else {
            graphicsLayer.blendMode = "destination-out";
          }
       }
      )
      setGraphicsLayer(graphicsLayer);
      const imageryLayer = new MapImageLayer({
        url: "https://gis.pottcounty-ia.gov/arcgis/rest/services/Imagery_WGS84/bw01_CB/MapServer"
      });
      
      const groupLayer = new GroupLayer({
        layers: [imageryLayer, graphicsLayer]
      })
      
      const viewOptions = {
        container: container.current,
        map: {
          basemap: "gray-vector",
          layers: [groupLayer]
        },
        center: [-95.850854, 41.297354],
        zoom: 12
      };
      const view = new MapView(viewOptions);
      view.when(() => {
        setMapView(view);
      });
    }
  }, [container]);
  
  const handleGeometryDraw = (evt) => {
    console.log('handleGeometryDraw', evt);
  } 

  return <><div className="fixed top-5 right-5 z-40 bg-slate-50	p-5"><GeometryChooser mapView={mapView} layer={graphicsLayer} onDraw={handleGeometryDraw} /></div><div className="viewDiv" ref={container}></div></>;
};

const App = () => {
  return (
    <div className="appWrapper relative">
      <Map />
    </div>
  );
};

const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(<App />);