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);
};
import React, { useMemo, useCallback } from 'react';
import { pluck } from 'ramda';
import classnames from 'classnames';
import { Tooltip } from 'recharts';
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
// @ts-ignore
import { Geographies, Geography, MapProvider } from 'react-simple-maps';
import { scaleLog } from 'd3-scale';
import * as d3Geo from 'd3-geo';
import { feature } from 'topojson-client';
import { useGeography } from './useGeography';
import { Legend } from './components/Legend';
import { ChartTooltip } from '../ChartTooltip';
import { useChartTooltipState } from '../hooks/useChartTooltipState';
import { useClickableChartStyle } from '../hooks/useClickableChartStyle';
import { withChartDataPercents } from '../HOCs/withChartDataPercents';
import { LEGEND_WIDTH, MAP_COLORS, USA_MAP } from './constants';
import { useStyles } from './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 = useStyles();
    var geoUrl = options.geoUrl, geoIdName = options.geoIdName, _c = options.showLegend, showLegend = _c === void 0 ? true : _c;
    var values = pluck('value', data);
    var minValue = Math.min.apply(Math, values);
    var maxValue = Math.max.apply(Math, values);
    var mapWidth = width < LEGEND_WIDTH ? 0 : width - (showLegend ? 1 : 0) * LEGEND_WIDTH;
    var colorScale = scaleLog().domain([minValue, maxValue]).range(MAP_COLORS);
    var geography = useGeography(geoUrl || USA_MAP);
    var getProjectionFunc = 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 : feature(geography, geoObj);
        return geoFunc().fitSize([mapWidth, height], featureObj);
    }, [geography, height, mapWidth]);
    var projection = geoUrl ? options.projection : 'geoAlbersUsa';
    var projectionFunc = useMemo(function () { return (geography ? getProjectionFunc(projection) : undefined); }, [geography, getProjectionFunc, projection]);
    var _d = useChartTooltipState(), tooltipState = _d.tooltipState, showTooltip = _d.showTooltip, hideTooltip = _d.hideTooltip;
    var clickable = useClickableChartStyle(onItemClick);
    return (React.createElement("div", { "data-reltio-id": "map-chart", className: styles.mapChart, style: { width: width, height: height } },
        React.createElement(MapProvider, { width: mapWidth, height: height, projection: projectionFunc, projectionConfig: {} },
            React.createElement("svg", { width: mapWidth, height: height, viewBox: "0 0 ".concat(mapWidth, " ").concat(height), className: 'rsm-svg' },
                React.createElement(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.createElement(Geography, { key: geo.rsmKey, geography: geo, "data-reltio-id": "map-geography", fill: cur ? colorScale(cur.value) : '#EEE', stroke: '#FFF', className: classnames(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.createElement(Legend, { width: LEGEND_WIDTH, minValue: minValue, maxValue: maxValue, colors: MAP_COLORS }),
        React.createElement(Tooltip, __assign({ "data-reltio-id": "map-chart-tooltip", viewBox: { x: 0, y: 0, width: mapWidth, height: height }, content: React.createElement(ChartTooltip, null) }, tooltipState))));
};
export default withChartDataPercents(MapChart);
