function addClickableShape (latlngs, shape_id) {
    // Create polyline and add to map
    const polyline = L.polyline(latlngs, { color: 'blue', weight: 5  }).addTo(map);

    // Store polyline reference in shapes object for reset purpose
    shapes["routes"][shape_id].polyline = polyline;
                
    // Add click event listener to polyline
    polyline.on('click', function (e) {
        let shape_ids = [shape_id];
        highlightShapes(shape_ids, "routes");

        displayShapeOptions(shape_id, shapes);

        console.log('Shape clicked:', shape_id);
    });
}

function addClickablePoint(latlng, point_id) {
    // latlng = a pair of coordinates, e.g., (52.2297, 21.0122) for Warsaw.
    
    // Tags version
    // Create marker and add to map
    // const marker = L.marker(latlng).addTo(map);

    // Points version
    // Create circle marker and add to map
    const marker = L.circleMarker(latlng, { radius: 10, color: 'blue'}).addTo(map);


    // Store marker reference in points object for reset purpose
    shapes["stops"][point_id]["marker"] = marker;

    // Add click event listener to marker
    marker.on('click', function (e) {
        let point_ids = [point_id];
        highlightShapes(point_ids, "stops");
        console.log('Point clicked:', point_id);
    });
}

function deleteShape(shapeID) {
    if (shapes["routes"][shapeID] && shapes["routes"][shapeID].polyline) {
        map.removeLayer(shapes["routes"][shapeID].polyline);  // Remove the polyline from the map
        delete shapes["routes"][shapeID];  // Delete the shape from the shapes object
        console.log('Shape deleted:', shapeID);
    }
}

function highlightShapes(shape_ids, type) {
    // Reset previous polylines to blue
    if (currentShapeIDs["routes"].length > 0) {
        for (const id of currentShapeIDs["routes"]) {
            if (shapes["routes"][id] && shapes["routes"][id].polyline) {
                shapes["routes"][id].polyline.setStyle({ color: 'blue' });
            }
        }
    }

    if (currentShapeIDs["stops"].length > 0) {
        for (const id of currentShapeIDs["stops"]) {
            console.log("stop id: ", id);
            console.log("shapes[id]: ", shapes[id]);
            if (shapes["stops"][id] && shapes["stops"][id]["marker"]) {
                shapes["stops"][id]["marker"].setStyle({ color: 'blue' });
            }
        }
    }

    if (type == "routes") {
        for (const id of shape_ids) {
            // Highlight the clicked polyline
            if (shapes[type][id] && shapes[type][id].polyline) {
                shapes[type][id].polyline.setStyle({ color: 'red' }).bringToFront();
            }
        }
    }

    if (type == "stops") {
        for (const id of shape_ids) {
            // Highlight the clicked polyline
            if (shapes["stops"][id] && shapes["stops"][id]["marker"]) {
                shapes["stops"][id]["marker"].setStyle({ color: 'red' }).bringToFront();
            }
        }
    }

    // Set new currentShapeIDs value
    currentShapeIDs[type] = shape_ids;
}

function makeShapesBlue() {
    // Reset previous polylines to blue
    if (currentShapeIDs["routes"].length > 0) {
        for (const id of currentShapeIDs["routes"]) {
            if (shapes["routes"][id] && shapes["routes"][id].polyline) {
                shapes["routes"][id].polyline.setStyle({ color: 'blue' });
            }
        }
    }
}