"use strict";
var __assign = (this && this.__assign) || function () {
    __assign = Object.assign || function(t) {
        for (var s, i = 1, n = arguments.length; i < n; i++) {
            s = arguments[i];
            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
                t[p] = s[p];
        }
        return t;
    };
    return __assign.apply(this, arguments);
};
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 });
var react_1 = __importStar(require("react"));
var ramda_1 = require("ramda");
var classnames_1 = __importDefault(require("classnames"));
var recharts_1 = require("recharts");
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
// @ts-ignore
var react_simple_maps_1 = require("react-simple-maps");
var d3_scale_1 = require("d3-scale");
var d3Geo = __importStar(require("d3-geo"));
var topojson_client_1 = require("topojson-client");
var useGeography_1 = require("./useGeography");
var Legend_1 = require("./components/Legend");
var ChartTooltip_1 = require("../ChartTooltip");
var useChartTooltipState_1 = require("../hooks/useChartTooltipState");
var useClickableChartStyle_1 = require("../hooks/useClickableChartStyle");
var withChartDataPercents_1 = require("../HOCs/withChartDataPercents");
var constants_1 = require("./constants");
var styles_1 = require("./styles");
var MapChart = function (_a) {
    var data = _a.data, width = _a.width, height = _a.height, _b = _a.options, options = _b === void 0 ? {} : _b, onItemClick = _a.onItemClick;
    var styles = (0, styles_1.useStyles)();
    var geoUrl = options.geoUrl, geoIdName = options.geoIdName, _c = options.showLegend, showLegend = _c === void 0 ? true : _c;
    var values = (0, ramda_1.pluck)('value', data);
    var minValue = Math.min.apply(Math, values);
    var maxValue = Math.max.apply(Math, values);
    var mapWidth = width < constants_1.LEGEND_WIDTH ? 0 : width - (showLegend ? 1 : 0) * constants_1.LEGEND_WIDTH;
    var colorScale = (0, d3_scale_1.scaleLog)().domain([minValue, maxValue]).range(constants_1.MAP_COLORS);
    var geography = (0, useGeography_1.useGeography)(geoUrl || constants_1.USA_MAP);
    var getProjectionFunc = (0, react_1.useCallback)(function (projection) {
        // eslint-disable-next-line import-x/namespace
        var geoFunc = (projection && d3Geo[projection]) || d3Geo['geoEqualEarth'];
        var geoObj = geography.objects && geography.objects[Object.keys(geography.objects)[0]];
        var featureObj = geography.type === 'FeatureCollection' ? geography : (0, topojson_client_1.feature)(geography, geoObj);
        return geoFunc().fitSize([mapWidth, height], featureObj);
    }, [geography, height, mapWidth]);
    var projection = geoUrl ? options.projection : 'geoAlbersUsa';
    var projectionFunc = (0, react_1.useMemo)(function () { return (geography ? getProjectionFunc(projection) : undefined); }, [geography, getProjectionFunc, projection]);
    var _d = (0, useChartTooltipState_1.useChartTooltipState)(), tooltipState = _d.tooltipState, showTooltip = _d.showTooltip, hideTooltip = _d.hideTooltip;
    var clickable = (0, useClickableChartStyle_1.useClickableChartStyle)(onItemClick);
    return (react_1.default.createElement("div", { "data-reltio-id": "map-chart", className: styles.mapChart, style: { width: width, height: height } },
        react_1.default.createElement(react_simple_maps_1.MapProvider, { width: mapWidth, height: height, projection: projectionFunc, projectionConfig: {} },
            react_1.default.createElement("svg", { width: mapWidth, height: height, viewBox: "0 0 ".concat(mapWidth, " ").concat(height), className: 'rsm-svg' },
                react_1.default.createElement(react_simple_maps_1.Geographies, { geography: geography }, function (_a) {
                    var geographies = _a.geographies;
                    return geographies.map(function (geo) {
                        var geoId = geo.properties[geoIdName || 'name'];
                        var geoLabel = geo.properties.name;
                        var cur = data.find(function (_a) {
                            var group = _a.group;
                            return group === geoId;
                        });
                        return (react_1.default.createElement(react_simple_maps_1.Geography, { key: geo.rsmKey, geography: geo, "data-reltio-id": "map-geography", fill: cur ? colorScale(cur.value) : '#EEE', stroke: '#FFF', className: (0, classnames_1.default)(styles.geography, clickable), onMouseEnter: function (event) {
                                var data = cur || { label: geoLabel, value: 0, percent: 0, group: geoId };
                                var mapRect = event.target.parentElement.parentElement.getBoundingClientRect();
                                var coordinate = {
                                    x: event.clientX - mapRect.x,
                                    y: event.clientY - mapRect.y
                                };
                                showTooltip(data, coordinate);
                            }, onMouseLeave: function () { return hideTooltip(); }, onClick: onItemClick && (function () { return onItemClick(geoId); }) }));
                    });
                }))),
        showLegend && react_1.default.createElement(Legend_1.Legend, { width: constants_1.LEGEND_WIDTH, minValue: minValue, maxValue: maxValue, colors: constants_1.MAP_COLORS }),
        react_1.default.createElement(recharts_1.Tooltip, __assign({ "data-reltio-id": "map-chart-tooltip", viewBox: { x: 0, y: 0, width: mapWidth, height: height }, content: react_1.default.createElement(ChartTooltip_1.ChartTooltip, null) }, tooltipState))));
};
exports.default = (0, withChartDataPercents_1.withChartDataPercents)(MapChart);
