// Create root element
// https://www.amcharts.com/docs/v5/getting-started/#Root_element
var root = am5.Root.new("chartdiv");

// Set themes
// https://www.amcharts.com/docs/v5/concepts/themes/
root.setThemes([am5themes_Animated.new(root)]);
root.interfaceColors.set("primaryButtonHover", '#37915a')

// Create the map chart
// https://www.amcharts.com/docs/v5/charts/map-chart/
var chart = root.container.children.push(
  am5map.MapChart.new(root, {
    panX: "translateX",
    panY: "translateY",
    homeZoomLevel: 7,
    homeGeoPoint: { longitude: 10, latitude: 52 },
    projection: am5map.geoMercator(),
  })
);

// Create series for background fill
// https://www.amcharts.com/docs/v5/charts/map-chart/map-polygon-series/#Background_polygon
var backgroundSeries = chart.series.push(am5map.MapPolygonSeries.new(root, {}));
backgroundSeries.mapPolygons.template.setAll({
  fill: root.interfaceColors.get("alternativeBackground"),
  fillOpacity: 0,
  strokeOpacity: 0
});
// Add background polygo
// https://www.amcharts.com/docs/v5/charts/map-chart/map-polygon-series/#Background_polygon
backgroundSeries.data.push({
  geometry: am5map.getGeoRectangle(90, 180, -90, -180)
});

// Create main polygon series for countries
// https://www.amcharts.com/docs/v5/charts/map-chart/map-polygon-series/
var polygonSeries = chart.series.push(
  am5map.MapPolygonSeries.new(root, {
    geoJSON: am5geodata_worldHigh
  })
);

polygonSeries.mapPolygons.template.setAll({
  fill: '#1e8346',
  fillOpacity: 0.15,
  strokeWidth: 0.5,
  stroke: root.interfaceColors.get("background"),
  interactive: true
});

polygonSeries.mapPolygons.template.states.create("hover", {
  fill: root.interfaceColors.get("primaryButtonHover")
});

polygonSeries.mapPolygons.template.states.create("active", {
  fill: root.interfaceColors.get("primaryButtonHover")
});

// Create polygon series for circles
// https://www.amcharts.com/docs/v5/charts/map-chart/map-polygon-series/
var circleTemplate = am5.Template.new({
  tooltipText: "Πατήστε για επιβεβαίωση"
});

var bubbleSeries = chart.series.push(
  am5map.MapPointSeries.new(root, {
    calculateAggregates: true,
    valueField: "value",
    latitudeField: "lat",
    longitudeField: "long"
  })
);

bubbleSeries.bullets.push(function () {
  const circle = am5.Circle.new(
    root,
    {
      radius: 8,
      templateField: "circleTemplate"
    },
    circleTemplate
  );

  circle.events.on("click", function(ev) {
    handleClick(ev.target.dataItem.dataContext.name);
  });

  return am5.Bullet.new(root, {
    sprite: circle
  });
});


var colors = am5.ColorSet.new(root, {});

bubbleSeries.data.setAll(allCountries);


function handleClick(clickedCity){
  if(codesCorrect.includes(clickedCity))
    return;
  
  if(typeof codesUsed[questions[activeItem].value] == 'undefined')
    codesUsed[questions[activeItem].value] = 0;
  codesUsed[questions[activeItem].value]++;

  if(clickedCity == questions[activeItem].value)
  {
    correct++;
    setPercentage();
    showNextQuestion();
  }

};


polygonSeries.events.on("datavalidated", function() {
  chart.goHome();
});

// Make stuff animate on load
chart.appear(1000, 100);

