import VectorLayer from 'ol/layer/Vector';
import {Vector as VectorSource} from 'ol/source.js';

import {Style} from 'ol/style.js';
import Icon from 'ol/style/Icon.js';

import pinURL from './pin.svg?url';
import { Feature } from 'ol';
import { Point } from 'ol/geom';
import { fromLonLat } from 'ol/proj';

const vectorLayer = new VectorLayer({
    source: new VectorSource({
      loader: async function() {
        const res = await fetch("https://api-v3.amtraker.com/v3/trains");
        const trainsByRoute = await res.json();

        for (let [_route, trains] of Object.entries(trainsByRoute)) {
          for (let train of trains) {
            const {stations: _, ...trainWithoutStations} = train;
            this.addFeature(new Feature({
              geometry: new Point(fromLonLat([train.lon, train.lat])),
              ...trainWithoutStations,
            }))
          }
        }
      },
    }),
    style: new Style({
        image: new Icon({
            anchor: [0.5, .9],
            src: pinURL,
        }),
    }),
});

setInterval(() => vectorLayer.getSource().refresh(), 30000);

export default vectorLayer;