"use strict";
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
    if (k2 === undefined) k2 = k;
    var desc = Object.getOwnPropertyDescriptor(m, k);
    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
      desc = { enumerable: true, get: function() { return m[k]; } };
    }
    Object.defineProperty(o, k2, desc);
}) : (function(o, m, k, k2) {
    if (k2 === undefined) k2 = k;
    o[k2] = m[k];
}));
var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
    Object.defineProperty(o, "default", { enumerable: true, value: v });
}) : function(o, v) {
    o["default"] = v;
});
var __importStar = (this && this.__importStar) || function (mod) {
    if (mod && mod.__esModule) return mod;
    var result = {};
    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
    __setModuleDefault(result, mod);
    return result;
};
var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.Map = void 0;
const react_1 = __importStar(require("react"));
require("./popup.css");
// has to be loaded with a script
const mapbox_gl_1 = __importDefault(require("mapbox-gl"));
const mapActions_1 = require("./mapActions");
const inlines_1 = require("inlines");
require("@mapbox/mapbox-gl-geocoder/dist/mapbox-gl-geocoder.css");
const hooks_1 = require("../../hooks");
const mapBoxColorTheme_1 = require("./mapBoxColorTheme");
mapbox_gl_1.default.accessToken =
    'pk.eyJ1IjoibmZyYWRlIiwiYSI6ImNra3h0cDhtNjA0NWYyb21zcnBhN21ra28ifQ.m5mqJjuX7iK9Z8JvNNcnfg';
exports.Map = (0, react_1.forwardRef)(({ data, height, style }, ref) => {
    const mapContainer = (0, react_1.useRef)(null);
    const map = (0, react_1.useRef)(null);
    const hoverVoteId = (0, react_1.useRef)(null);
    const { theme } = (0, hooks_1.useTheme)();
    (0, react_1.useImperativeHandle)(ref, () => ({
        fitToData: () => {
            if (!map.current)
                return;
            (0, mapActions_1.fitToData)({ data, map: map.current });
        },
    }));
    (0, react_1.useEffect)(() => {
        if (map.current) {
            map.current.remove();
        }
        setTimeout(() => {
            let snurpTheme = (0, mapBoxColorTheme_1.makeTheme)();
            const m = (0, mapActions_1.initMap)({
                mapContainer,
                onLoad: () => {
                    (0, mapActions_1.addValues)({ data, map: m, hoverVoteId });
                    (0, mapActions_1.addCountries)({ map: m });
                    (0, mapActions_1.updateCircleRadius)({ data, map: m });
                    map.current = m;
                },
                onZoom: () => {
                    (0, mapActions_1.updateCircleRadius)({ data, map: m });
                },
                snurpTheme,
            });
            return () => {
                if (map.current) {
                    map.current.remove();
                }
            };
        }, 10);
    }, [theme]);
    (0, react_1.useEffect)(() => {
        if (map.current) {
            (0, mapActions_1.updateCircleRadius)({ data, map: map.current });
            map.current.getSource('values').setData(data);
        }
    }, [map, data]);
    return (react_1.default.createElement(inlines_1.styled.div, { ref: mapContainer, style: {
            height: height ? `${height}px` : 'auto',
            position: 'relative',
            '& .mapboxgl-popup': {
                marginTop: `-${height - 90}px`,
            },
            ...style,
        } }));
});
//# sourceMappingURL=index.js.map