var map = L.map('map').setView([55.68, 12.57], 13);
L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
    maxZoom: 19,
    attribution: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>'
}).addTo(map);

let known_store_chains;
let icons = {};

var markers =  L.featureGroup().addTo(map);
var polygons =  L.featureGroup().addTo(map);
var heatmap =  L.featureGroup().addTo(map);

const CategoryField = document.getElementById('Category');
const LoadingIndicator = document.getElementById('LoadingIndicator');
const SubmitButton = document.getElementById('SubmitButton');
const form = document.getElementById('QueryForm');

form.addEventListener('submit', (event) => {
    event.preventDefault(); // Prevents the default form submission
    runQueryAfterLoad()
});

const DefaultSearchValue = "supermarket";
var Categories = []

var overlayMaps = {
    "POI markers": markers,
    "Nearest POI polygons": polygons,
//    "POI heatmap": heatmap
};

var layerControl = L.control.layers({},overlayMaps).addTo(map);

function runQueryAfterLoad() {
    if (!SubmitButton.disabled) { // Disallow double queries
        SubmitButton.disabled = true;
        LoadingIndicator.hidden = false;
        const url = new URL(location);
        url.searchParams.set("Category", CategoryField.value);
        history.pushState({}, "", url);


        markers.clearLayers();
        polygons.clearLayers();
        fetchAll(CategoryField.value);
    }
}

async function fetchCategories() {
    const response = await fetch("categories.json");
    try {
        categories = await response.json();
        const CategoriesDataList = document.getElementById('CategoriesDataList');
        categories.forEach(function(item){
            var option = document.createElement('option');
            option.value = item;
            option.innerHTML = item;
            CategoriesDataList.appendChild(option);
    });
    CategoryField.pattern = categories.join('|');
    } catch (error) {
        alert(`Failed to fetch categories, are you online?\n${error.message}`)
    }
}

async function fetchChains() {
    const response = await fetch("chains.json");
    known_store_chains = await response.json();
    icons["Unknown"] = L.icon({
        iconUrl: 'icons/Unknown.png',
        iconSize: [10, 16],
        iconAnchor: [5, 8],
    });
    for (let known_store_chain in known_store_chains) {
        icons[known_store_chain] = L.icon({
            iconUrl: `icons/${known_store_chain}.png`,
            iconAnchor: [8, 8],
        });
    }

    const queryString = window.location.search;
    const urlParams = new URLSearchParams(queryString);
    const urlParam = urlParams.get('Category')
    const fieldValue = CategoryField.value
    // Retains saved value from input field on reload
    if (urlParam)
    {
        fetchAll(urlParam);
        CategoryField.value = urlParam;

    } else if (fieldValue !== "")
    {
        fetchAll(fieldValue);
    }  else
    {
        CategoryField.value = DefaultSearchValue;
        fetchAll(DefaultSearchValue);
    }
}


function addPolygon(store) {
    let color;
    if (known_store_chains.hasOwnProperty(store.brand)) {
        color = known_store_chains[store.brand];
    } else {
        color = 'grey';
    }
    L.polygon(store.polygon, {color: color}).addTo(polygons);
}

function addShop(shop) {
    let icon;

    if (known_store_chains.hasOwnProperty(shop.brand)){
        icon = icons[shop.brand];
    } else {
        icon = icons["Unknown"];
    }

    L.marker([shop.lat, shop.long], {
        title: shop.name,
        icon: icon,
    }).addTo(markers);
    addPolygon(shop)
}


async function fetchAll(Category) {
  const response = await fetch(`all.json?Category=${Category}`)
  const shops = await response.json();
  shops.forEach((shop) => addShop(shop));
  LoadingIndicator.hidden = true;
  SubmitButton.disabled = false;
}

async function fetchShopHeatmap() {
    const response = await fetch("stores.json");
    const shops = await response.json();
    var heat = L.heatLayer(shops, {radius: 30}).addTo(heatmap);
}

fetchChains();
fetchCategories();
//fetchShopHeatmap();