// 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: 3,
    homeGeoPoint: { longitude: 35, 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({
  tooltipText: "{name}",
  templateField: "polygonSettings"
});

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, {});

const dataForCountries = {
  'za': 'Η σημαία δημιουργήθηκε το 1994 και απεικονίζει την σύγκλιση των λαών ως ένα (με το συμβολισμό του πλαϊνού Y), αφήνοντας πίσω τον φυλετικό διαχωρισμό μεταξύ λευκών και μαύρων που για χρόνια μάστιζε τη χώρα. Το μαύρο χρώμα συμβολίζει το σκληρό παρελθόν ενώ το μπλε και το κόκκινο είναι από Ολλανδικές επιρροές.',
  'fr': 'Η γαλλική σημαία, η τρίχρωμη αυτή σημαία, γεννήθηκε κατά τη διάρκεια της Γαλλικής Επανάστασης το 1789 όπου τα τρία χρώματα μπλε, άσπρο, κόκκινο, αντιπροσωπεύουν την ελευθερία, την ισότητα και την αδελφότητα.',
  'us': 'Η σημαία των ΗΠΑ αποτελείται από 13 οριζόντιες λωρίδες κόκκινες και άσπρες που συμβολίζουν τις αρχικές πολιτείες των ΗΠΑ και από 50 λευκά αστέρια που συμβολίζουν και τις 50 πολιτείες της Αμερικής. Ο αρχικός σχεδιασμός συνοδεύει τη χώρα από τη στιγμή της ανεξαρτησίας της το 1776.',
  'ca': 'Το λευκό αντιπροσωπεύει την ειρήνη, την αγνότητα και την ειλικρίνεια ενώ το κόκκινο αντιπροσωπεύει την αντοχή, το θάρρος, τη δύναμη και τη γενναιότητα και είναι σύμβολο των Καναδών που θυσιάστηκαν στους δύο παγκόσμιους πολέμους. Το φύλλο στη μέση, ένα φύλλο σφενδάμου, υμνεί τη φύση και το περιβάλλον.',
  'cn': 'Το κόκκινο χρώμα στη σημαία αντιπροσωπεύει την επανάσταση, ταυτόχρονα όμως είναι και το παραδοσιακό χρώμα της Κίνας. Τα τέσσερα μικρά αστέρια συμβολίζουν τις τέσσερις κοινωνικές τάξεις στη χώρα- την εργατική τάξη, τους αγρότες, τη μικροαστική τάξη των πόλεων και την αστική τάξη, ενωμένες κάτω από το Κομμουνιστικό Κόμμα της Κίνας που αντιπροσωπεύεται από το μεγάλο αστέρι.',
  'jp': 'Γνωστή και ως σημαία του Ήλιου, είναι λευκή συμβολίζοντας την αγνότητα, την ειλικρίνεια και την ακεραιότητα, με έναν κόκκινο δίσκο στη μέση που συμβολίζει τον Τυχερό Ήλιο σύμβολο φωτεινότητας και θερμότητας. Καθιερώθηκε από το 1870. ',
  'kr': 'Έγινε επίσημη σημαία το 1883. Τα τέσσερα τριγράμματα εκπροσωπούν τις 4 κινέζικες βασικές αρχές για το σύμπαν, δηλαδή Αρμονία, Συμμετρία, Ισορροπία, Στρογγυλότητα. Το τέγκουκ (ο κυανέρυθρος κύκλος) συμβολίζει την προέλευση όλων των στοιχείων του σύμπαντος, με τις δύο αρχές του «Ουμ», που είναι η αρνητική πλευρά και συμβολίζεται με μπλε και του «Γιανγκ» που είναι η θετική πλευρά και συμβολίζεται με κόκκινο. Τα δύο αυτά στοιχεία είναι σε πλήρη ισορροπία. ',
  'dk': 'Είναι η αρχαιότερη συνεχόμενα χρησιμοποιούμενη εθνική σημαία που υπάρχει στον κόσμο. Ο σταυρός συμβολίζει τον Χριστιανισμό και υιοθετήθηκε από όλες τις σκανδιναβικές χώρες αλλά και άλλες. ',
  'np': 'Το ασυνήθιστο σχήμα της σημαίας συμβολίζει τις κορυφές των Ιμαλαϊων. Τα σύμβολα του ήλιου και του φεγγαριού αντιπροσωπεύουν την ηρεμία και την αποφασιστικότητα, το κόκκινο αντιπροσωπεύει το εθνικό λουλούδι της χώρας που είναι το ροδόδενδρο, ενώ το μπλε αντιπροσωπεύει την ειρήνη. ',
  'gr': 'Υπάρχει ο ισχυρισμός ότι οι εννέα λωρίδες αντιστοιχούν στις εννέα συλλαβές της φράσης «Ελευθερία ή Θάνατος», το σύνθημα της Ελληνικής Επανάστασης του 1821. Ο λευκός σταυρός είναι το σύμβολο της ελληνορθόδοξης εκκλησίας ενώ το κυανό και λευκό συμβολίζουν τα χρώματα του ελληνικού ουρανού και της θάλασσας. ',
};

const modal = document.querySelector('#modal');
modal.addEventListener('click', function(){
  this.classList.remove('show')
})
const modalContent = document.querySelector('#modal-content');

polygonSeries.mapPolygons.template.events.on("click", (ev) => {
  var clickedCountry = ev.target.dataItem.get("id").toLowerCase();
  // console.log(clickedCountry);
  console.log(dataForCountries);
  console.log(clickedCountry);
  console.log(dataForCountries[clickedCountry]);
  if(typeof dataForCountries[clickedCountry] != 'undefined')
  {
    modalContent.innerHTML = `<img src="./flags/${clickedCountry}-flag.jpg"> ${dataForCountries[clickedCountry]}`;
    modal.classList.add('show');
  }

});




polygonSeries.data.setAll([{
  id: "CN",
  polygonSettings: {
    fill: am5.color('#1e8346')
  }
}, {
  id: "GR",
  polygonSettings: {
    fill: am5.color('#1e8346')
  }
}, {
  id: "NP",
  polygonSettings: {
    fill: am5.color('#1e8346')
  }
}, 
{
  id: "DK",
  polygonSettings: {
    fill: am5.color('#1e8346')
  }
},
{
  id: "KR",
  polygonSettings: {
    fill: am5.color('#1e8346')
  }
},
{
  id: "JP",
  polygonSettings: {
    fill: am5.color('#1e8346')
  }
},
{
  id: "CA",
  polygonSettings: {
    fill: am5.color('#1e8346')
  }
},
{
  id: "US",
  polygonSettings: {
    fill: am5.color('#1e8346')
  }
},
{
  id: "FR",
  polygonSettings: {
    fill: am5.color('#1e8346')
  }
},
{
  id: "ZA",
  polygonSettings: {
    fill: am5.color('#1e8346')
  }
},

])

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

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

// chart.events.on("click", function(ev) {
//   console.log(chart.invert(ev.point))
// });
