'use strict';

Object.defineProperty(exports, '__esModule', { value: true });

var _tslib = require('../_virtual/_tslib.js');
var jsxRuntime = require('react/jsx-runtime');
var EChartsReactCore = require('echarts-for-react/lib/core');
var charts = require('echarts/charts');
var components = require('echarts/components');
var echarts = require('echarts/core');
var features = require('echarts/features');
var renderers = require('echarts/renderers');
var React = require('react');

function _interopNamespaceDefault(e) {
  var n = Object.create(null);
  if (e) {
    Object.keys(e).forEach(function (k) {
      if (k !== 'default') {
        var d = Object.getOwnPropertyDescriptor(e, k);
        Object.defineProperty(n, k, d.get ? d : {
          enumerable: true,
          get: function () { return e[k]; }
        });
      }
    });
  }
  n.default = e;
  return Object.freeze(n);
}

var echarts__namespace = /*#__PURE__*/_interopNamespaceDefault(echarts);

echarts__namespace.use([
    components.GeoComponent,
    components.GridComponent,
    components.LegendComponent,
    components.TitleComponent,
    components.ToolboxComponent,
    components.TooltipComponent,
    charts.HeatmapChart,
    components.VisualMapComponent,
    charts.MapChart,
    charts.ScatterChart,
    renderers.CanvasRenderer,
    features.UniversalTransition,
]);
const DEFAULT_HEIGHT = 800;
const DEFAULT_TRANSITION_DURATION = 300;
const containerStyle = {
    height: DEFAULT_HEIGHT,
};
const goDownAnimStartStyle = {
    height: DEFAULT_HEIGHT,
    transform: 'scale(0)',
    opacity: 0,
};
const goDownAnimEndStyle = {
    height: DEFAULT_HEIGHT,
    transition: `all ${DEFAULT_TRANSITION_DURATION / 1000}s ease-in-out`,
    transform: 'scale(1)',
    opacity: 1,
};
const goUpAnimStartStyle = {
    height: DEFAULT_HEIGHT,
    transform: 'scale(1.5)',
    opacity: 0,
};
const goUpAnimEndStyle = {
    height: DEFAULT_HEIGHT,
    transition: `all ${DEFAULT_TRANSITION_DURATION / 1000}s ease-in-out`,
    transform: 'scale(1)',
    opacity: 1,
};
/**
 * 支持下钻的 echarts 地图
 */
var DrillableMap = React.forwardRef(function DrillableMap(props, ref) {
    const rootMapName = 'root';
    const { rootGeoJson, childrenGeoJsonMap = {}, drillDownDisabled = false, geoOption, toolboxOption, onMapLevelChange, style, option, onEvents } = props, restProps = _tslib.__rest(props, ["rootGeoJson", "childrenGeoJsonMap", "drillDownDisabled", "geoOption", "toolboxOption", "onMapLevelChange", "style", "option", "onEvents"]);
    const [innerOption, setInnerOption] = React.useState({});
    const [innerStyle, setInnerStyle] = React.useState(containerStyle);
    const echartsReactCoreRef = React.useRef(null);
    const mapStackRef = React.useRef([]);
    const firstMountRef = React.useRef(true);
    React.useImperativeHandle(ref, () => {
        var _a;
        return ({
            echartsInstance: (_a = echartsReactCoreRef.current) === null || _a === void 0 ? void 0 : _a.getEchartsInstance(),
            backToUpperLevel: () => {
                mapStackHelper.pop();
            },
            drillDown,
        });
    });
    React.useEffect(() => {
        if (firstMountRef.current) {
            // @ts-ignore
            echarts__namespace.registerMap(rootMapName, rootGeoJson);
            setInnerOption(generateMapOption());
            firstMountRef.current = false;
        }
        else {
            const mapStack = mapStackRef.current;
            const mapOption = mapStack.length ? { mapName: mapStack[mapStack.length - 1] } : undefined;
            setInnerOption(generateMapOption(mapOption));
        }
    }, [option, geoOption, rootGeoJson]);
    const mapStackHelper = {
        push: (mapName) => {
            const mapStack = mapStackRef.current;
            if (!mapStack.includes(mapName)) {
                mapStackRef.current = [...mapStack, mapName];
            }
            startGoDownAnimation(() => {
                updateMap(mapName);
                onMapLevelChange === null || onMapLevelChange === void 0 ? void 0 : onMapLevelChange('down', mapName);
            });
        },
        pop: () => {
            const mapStack = mapStackRef.current;
            mapStack.pop();
            mapStackRef.current = [...mapStack];
            const currentMap = mapStack.slice(-1)[0] || rootMapName;
            startGoUpAnimation(() => {
                updateMap(currentMap);
                onMapLevelChange === null || onMapLevelChange === void 0 ? void 0 : onMapLevelChange('up', currentMap);
            });
        },
    };
    function updateMap(mapName) {
        if (mapName === rootMapName || Object.prototype.hasOwnProperty.call(childrenGeoJsonMap, mapName)) {
            if (!echarts__namespace.getMap(mapName)) {
                // @ts-ignore
                echarts__namespace.registerMap(mapName, childrenGeoJsonMap[mapName]);
            }
            setInnerOption(generateMapOption({ mapName }));
        }
    }
    function generateMapOption(_option) {
        const { mapName: _mapName = rootMapName } = _option || {};
        const isMaxLevel = _mapName === rootMapName;
        const _a = option || {}, { geo } = _a, restOption = _tslib.__rest(_a, ["geo"]);
        const commonMapGeo = Object.assign({ map: _mapName, roam: false, zoom: 1, scaleLimit: { min: 1 } }, geoOption);
        return Object.assign({ title: isMaxLevel ? undefined : { text: _mapName }, tooltip: { trigger: 'item' }, toolbox: Object.assign({ show: !!mapStackRef.current.length, left: 'right', top: 'top', itemSize: 30, feature: {
                    myBackUpperLevel: {
                        icon: 'path://M19.5 12.5H6.5M12.5 6.5L5.5 12.5L12.5 18.5',
                        onclick() {
                            mapStackHelper.pop();
                        },
                    },
                } }, toolboxOption), geo: Array.isArray(geo) ? [commonMapGeo, ...geo] : [commonMapGeo, geo] }, restOption);
    }
    function startGoDownAnimation(onAnimationEnd) {
        setInnerStyle(goDownAnimStartStyle);
        setTimeout(() => {
            setInnerStyle(goDownAnimEndStyle);
            onAnimationEnd();
        }, 0);
    }
    function startGoUpAnimation(onAnimationEnd) {
        setInnerStyle(goUpAnimStartStyle);
        setTimeout(() => {
            setInnerStyle(goUpAnimEndStyle);
            onAnimationEnd();
        }, 0);
    }
    function drillDown(mapName) {
        if (Object.prototype.hasOwnProperty.call(childrenGeoJsonMap, mapName)) {
            mapStackHelper.push(mapName);
        }
    }
    const handleOnEvents = Object.assign({ click: ({ name }) => {
            if (drillDownDisabled) {
                return;
            }
            drillDown(name);
        } }, onEvents);
    return (jsxRuntime.jsx(EChartsReactCore, Object.assign({ ref: echartsReactCoreRef, style: Object.assign(Object.assign({}, innerStyle), style), echarts: echarts__namespace, option: innerOption, onEvents: handleOnEvents }, restProps)));
});

exports.default = DrillableMap;
//# sourceMappingURL=drillable-map.js.map
