import { MapContainer, GeoJSON, TileLayer } from "react-leaflet";
import Parser from "./parser/parser";
import { useEffect, useState } from "react";
import hash from "object-hash";

const parser = await Parser.instance();

function App() {
  const [procedure, setProcedure] = useState<string>();
  console.log(procedure);

  useEffect(() => {
    (async () => {
      setProcedure(await parser.parse(10394));
    })();
  }, []);

  return (
    <div style={{ display: "flex", height: "100vh", width: "100vw" }}>
      <MapContainer
        center={[51.505, -0.09]}
        zoom={13}
        style={{ height: "100%", width: "100%" }}
      >
        <TileLayer
          attribution='&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
          url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
        />
        <GeoJSON
          key={hash(procedure ?? "")}
          data={procedure}
          style={{
            color: "#00ffff",
            stroke: true,
            weight: 2,
            opacity: 1,
          }}
        />
      </MapContainer>
      <div></div>
    </div>
  );
}

export default App;
