import './style.css';
import Feature from 'ol/Feature';
import GeoJSON from 'ol/format/GeoJSON';
import {Map, View} from 'ol';
import {Tile as TileLayer, Vector as VectorLayer} from 'ol/layer';
import {Icon, Stroke, Style} from 'ol/style';
import {OSM, Vector as VectorSource} from 'ol/source';
import {useGeographic} from 'ol/proj';
import geojsonRoute from './geo/route.json'
import geojsonPOI from './geo/poi.json'

useGeographic();

const styles = {
  lineOrange: new Style({
    stroke: new Stroke({
      color: '#FF9900',
      // lineDash: [8],
      width: 5,
    }),
  }),
  lineGrey: new Style({
    stroke: new Stroke({
      color: '#555555',
      // lineDash: [8],
      width: 5,
    }),
  }),
  iconStop: new Style({
    image: new Icon({
      anchor: [0.5, 46],
      anchorXUnits: 'fraction',
      anchorYUnits: 'pixels',
      src: 'data/icon.png',
    }),
  })
}

const lastStageFinished = 4;
const stagesCompleted = geojsonRoute.features.slice(0, lastStageFinished);
const stagesAhead = geojsonRoute.features.slice(lastStageFinished);
const vectorSourceStagesCompleted = new VectorSource();
const vectorSourceStagesAhead = new VectorSource();

for (const stage of stagesCompleted) {
  vectorSourceStagesCompleted.addFeature(new GeoJSON().readFeature(stage));
}
for (const stage of stagesAhead) {
  vectorSourceStagesAhead.addFeature(new GeoJSON().readFeature(stage));
}

const stagesCompletedLayer = new VectorLayer({
  source: vectorSourceStagesCompleted,
  style: styles.lineOrange
});

const stagesAheadLayer = new VectorLayer({
  source: vectorSourceStagesAhead,
  style: styles.lineGrey
});

const vectorSourcePOI = new VectorSource({
  features: new GeoJSON().readFeatures(geojsonPOI),
});

const poiLayer = new VectorLayer({
  source: vectorSourcePOI,
  style: styles.iconStop,
});

const view = new View({
  center: [10.6, 46.9],
  zoom: 7
})

const map = new Map({
  target: 'map',
  layers: [
    new TileLayer({
      source: new OSM()
    }),
    stagesCompletedLayer,
    stagesAheadLayer,
    poiLayer
  ],
  view: view
});