import * as am5 from "@amcharts/amcharts5";
import * as am5map from "@amcharts/amcharts5/map";
import * as am5geodata_australiaLow from "@amcharts/amcharts5-geodata/australiaLow";
import am5themes_Animated from "@amcharts/amcharts5/themes/Animated";

export interface City {
    title:any
    city: string;
    state: any;
    lat: number;
    lng: number;
}

export function createMapChart(containerId: string, cities: City[]): am5.Root {
    // Create root element
    let root = am5.Root.new(containerId);

    // Set themes
    root.setThemes([
        am5themes_Animated.new(root)
    ]);

    var chart = root.container.children.push(
        am5map.MapChart.new(root, {
            panX: "translateX",
            panY: "translateY",
            projection: am5map.geoMercator() // Use Mercator projection or other as needed
        })
    );

    chart.set("zoomControl", am5map.ZoomControl.new(root, {}));

    // Create main polygon series for countries
    var polygonSeries = chart.series.push(
        am5map.MapPolygonSeries.new(root, {
            geoJSON: am5geodata_australiaLow.default,
        })
    );

    polygonSeries.mapPolygons.template.setAll({
        fill: am5.color(0xdadada)
    });

    // Create point series for markers
    var pointSeries = chart.series.push(am5map.ClusteredPointSeries.new(root, {
        groupIdField: "state"
    }));

    // Set clustered bullet
    pointSeries.set("clusteredBullet", function (root) {
        let container = am5.Container.new(root, {
            cursorOverStyle: "pointer"
        });

        var circle1 = container.children.push(am5.Circle.new(root, {
            radius: 8,
            tooltipY: 0,
            fill: am5.color(0xff8c00)
        }));

        var circle2 = container.children.push(am5.Circle.new(root, {
            radius: 12,
            fillOpacity: 0.3,
            tooltipY: 0,
            fill: am5.color(0xff8c00)
        }));

        var circle3 = container.children.push(am5.Circle.new(root, {
            radius: 16,
            fillOpacity: 0.3,
            tooltipY: 0,
            fill: am5.color(0xff8c00)
        }));

        var label = container.children.push(am5.Label.new(root, {
            centerX: am5.p50,
            centerY: am5.p50,
            fill: am5.color(0xffffff),
            populateText: true,
            fontSize: "8",
            text: "{value}"
        }));

        container.events.on("click", function (e) {
            let dataItem = e.target.dataItem;
            let clusterValue = dataItem ? dataItem.get("clusteredValue") : "";
            label.set("text", clusterValue);
            pointSeries.zoomToCluster(dataItem);
        });

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

    // Create regular bullets
    pointSeries.bullets.push(function () {
        let circle = am5.Circle.new(root, {
            radius: 6,
            fill: am5.color(0xff8c00),
            tooltipText: "{title}"
        });

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

    // Add cities to the point series
    for (var i = 0; i < cities.length; i++) {
        var store = cities[i];
        addStore(store.lng, store.lat, store.city, store.state);
    }

    function addStore(longitude, latitude, title, state) {
        pointSeries.data.push({
            geometry: { type: "Point", coordinates: [longitude, latitude] },
            title: title,
            state: state
        });
    }

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

    return root;
}