import React from 'react';
import axios from 'axios';
import qs from 'qs';

var data = qs.stringify({
	'data': '[bbox:51.990800124058914,10.045623779296875,52.552976197007524,11.01104736328125][out:json];(node["shop"="second_hand"];way["shop"="second_hand"];relation["shop"="second_hand"];);out center;'
});

var config = {
    method: 'post',
    maxBodyLength: Infinity,
    url: 'https://overpass-api.de/api/interpreter',
    headers: {
	'Content-Type': 'application/x-www-form-urlencoded'
    },
    data : data
};

function myFunction(value,key) {
    //console.log("key: "+key+",type: "+value.type);
    if(value.tags.name===undefined){
	console.log('ERROR: OSM element does NOT include name tag');
    }else if(value.type==='node'){
	console.log('node');
	console.log('name: '+value.tags.name);
	console.log('lat: '+value.lat);
	console.log('lon: '+value.lon);
    }else if(value.type==='way'){
	console.log('way');
	console.log('name: '+value.tags.name);
	console.log('lat: '+value.center.lat);
	console.log('lon: '+value.center.lon);
    }else{
	console.log('ERROR: OSM element NOT supported');
    }
} 

function post () {
    console.log('post() started...');
    console.log('data: '+data);

    axios(config)
	.then(function (response) {
	    //log JSON
	    const dataObj=response.data;
	    //console.log("dataObj: "+dataObj);
	    const elemAry=dataObj.elements;
	    const elemAryLength=elemAry.length;
	    console.log("no: "+elemAryLength)
	    elemAry.forEach(myFunction);
	})
	.catch(function (error) {
	    console.log(error);
	});
    console.log('post() done.');
}

export default function Map() {
    return (
	<>
	    <p>Map</ p>
            <button onClick={post}>post</button>
	</>
    );
}
