// 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: 8,
    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: "{name}: {value}"
});

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

bubbleSeries.bullets.push(function () {
  return am5.Bullet.new(root, {
    sprite: am5.Circle.new(
      root,
      {
        radius: 10,
        templateField: "circleTemplate"
      },
      circleTemplate
    )
  });
});

bubbleSeries.set("heatRules", [
  {
    target: circleTemplate,
    min: 3,
    max: 30,
    key: "radius",
    dataField: "value"
  }
]);



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

// // Add globe/map switch
// var cont = chart.children.push(
//   am5.Container.new(root, {
//     layout: root.horizontalLayout,
//     x: 20,
//     y: 40
//   })
// );


polygonSeries.mapPolygons.template.events.on("click", (ev) => {
  var clickedCountry = ev.target.dataItem.get("id");
  // console.log(clickedCountry);
  if(codesCorrect.includes(clickedCountry))
    return;

  
  if(typeof codesUsed[questions[activeItem].code] == 'undefined')
    codesUsed[questions[activeItem].code] = 0;
  codesUsed[questions[activeItem].code]++;

  // if(codesUsed[questions[activeItem].code] > 2)
  // {
  //   showNextQuestion();
  //   return;
  // }

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



});

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

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