import Map from 'ol/Map.js';
import View from 'ol/View.js';
import GeoJSON from 'ol/format/GeoJSON.js';
import TileLayer from 'ol/layer/Tile.js';
import VectorLayer from 'ol/layer/Vector.js';
import OSM from 'ol/source/OSM.js';
import VectorSource from 'ol/source/Vector.js';
import CircleStyle from 'ol/style/Circle.js';
import Fill from 'ol/style/Fill.js';
import Stroke from 'ol/style/Stroke.js';
import Style from 'ol/style/Style.js';
import { useGeographic } from 'ol/proj.js';

useGeographic(); // Use geographic coordinates (longitude, latitude)

function buildMap(id, json) {
    var vectorSource = new VectorSource({
        features: new GeoJSON().readFeatures(json),
    });

    let features = new GeoJSON().readFeatures(json);

    let firstFeature = features[0];
    let point = firstFeature.getGeometry();
    let coordinates = point.getCoordinates();

    if (!coordinates || coordinates.length === 0) {
        return;
    }

    let center = coordinates;
    if (coordinates[0].length > 2) {
        center = coordinates[0][0]; // Use first two coordinates for center
    }

    var vectorLayer = new VectorLayer({
        source: vectorSource,
        style: styleFunction,
    });

    var map = new Map({
        layers: [
            new TileLayer({
                source: new OSM(),
            }),
            vectorLayer,
        ],
        target: id,
        view: new View({
            center: center,
            zoom: 5,
        }),
    });
}

document.addEventListener("init-global-map", (event) => {
    let id = event.detail.id;
    let today = new moment().format('YYYYMMDD');
    let fileNames =
        [today + '_00_F06_sigwx_hi_ICING.geojson'];
    console.log(today);
    let json = 'aa';
    for (var i in fileNames) {
        fileNames[i] = window.baseUrl + '/uploads/sigwx/' + today + '/' + fileNames[i];
        console.log(fileNames[i]);
        fetch(fileNames[i]).then(response => {
            if (!response.ok) {
                throw new Error(`HTTP error! Status: ${response.status}`);
            }
            return response.text();
        })
            .then(data => {
                console.log(data); // Process the file content here
                json = data;
                console.log('JSON:');
                console.log(json);

                buildMap(id, json);
            })
            .catch(error => {
                console.error('Error fetching the file:', error);
            });

    }


});

document.addEventListener("init-map", (event) => {
    let json = event.detail.json;
    let id = event.detail.id;
    buildMap(id, json);
});

const image = new CircleStyle({
    radius: 5,
    fill: null,
    stroke: new Stroke({color: 'red', width: 1}),
});

const styles = {
    'Point': new Style({
        image: image,
    }),
    'LineString': new Style({
        stroke: new Stroke({
            color: 'green',
            width: 1,
        }),
    }),
    'MultiLineString': new Style({
        stroke: new Stroke({
            color: 'green',
            width: 1,
        }),
    }),
    'MultiPoint': new Style({
        image: image,
    }),
    'MultiPolygon': new Style({
        stroke: new Stroke({
            color: 'yellow',
            width: 1,
        }),
        fill: new Fill({
            color: 'rgba(255, 255, 0, 0.1)',
        }),
    }),
    'Polygon': new Style({
        stroke: new Stroke({
            color: 'blue',
            lineDash: [4],
            width: 3,
        }),
        fill: new Fill({
            color: 'rgba(0, 0, 255, 0.1)',
        }),
    }),
    'GeometryCollection': new Style({
        stroke: new Stroke({
            color: 'magenta',
            width: 2,
        }),
        fill: new Fill({
            color: 'magenta',
        }),
        image: new CircleStyle({
            radius: 10,
            fill: null,
            stroke: new Stroke({
                color: 'magenta',
            }),
        }),
    }),
    'Circle': new Style({
        stroke: new Stroke({
            color: 'red',
            width: 2,
        }),
        fill: new Fill({
            color: 'rgba(255,0,0,0.2)',
        }),
    }),
};

const styleFunction = function (feature) {
    return styles[feature.getGeometry().getType()];
};


// let map = L.map(id).setView([52, 5], 8);
// L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png').addTo(map);
// try {
//     L.geoJSON(json, {
//         onEachFeature: function (feature, layer) {
//             if (feature.properties.popupContent) {
//                 layer.bindPopup(feature.properties.popupContent);
//             }
//         }
//     }).addTo(map);
// } catch (err) {
//     document.getElementById(id).innerHTML = err;
// }