'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');
var config = require('./config.js');

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,
    charts.MapChart,
    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,
};
var index = React.forwardRef((props, ref) => {
    const { goDownDisabled = false, geoOption, onMapLevelChange, style, option, onEvents } = props, restProps = _tslib.__rest(props, ["goDownDisabled", "geoOption", "onMapLevelChange", "style", "option", "onEvents"]);
    const [innerOption, setInnerOption] = React.useState({});
    const [innerStyle, setInnerStyle] = React.useState(containerStyle);
    const echartsReactCoreRef = React.useRef(null);
    const mapStackRef = React.useRef([]);
    React.useImperativeHandle(ref, () => {
        var _a;
        return ({
            echartsInstance: (_a = echartsReactCoreRef.current) === null || _a === void 0 ? void 0 : _a.getEchartsInstance(),
            backToUpperLevel: () => {
                mapStackHelper.pop();
            },
        });
    });
    React.useEffect(() => {
        initMap();
        function initMap() {
            if (!echarts__namespace.getMap('china')) {
                // @ts-ignore
                echarts__namespace.registerMap('china', config.default.china);
            }
            setInnerOption(generateMapOption());
        }
    }, [option]);
    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] || 'china';
            startGoUpAnimation(() => {
                updateMap(currentMap);
                onMapLevelChange === null || onMapLevelChange === void 0 ? void 0 : onMapLevelChange('up', currentMap);
            });
        },
    };
    function updateMap(mapName) {
        if (Object.prototype.hasOwnProperty.call(config.default, mapName)) {
            if (!echarts__namespace.getMap(mapName)) {
                // @ts-ignore
                echarts__namespace.registerMap(mapName, config.default[mapName]);
            }
            setInnerOption(generateMapOption({ mapName }));
        }
    }
    function generateMapOption(_option) {
        const { mapName: _mapName = 'china' } = _option || {};
        const isMaxLevel = _mapName === 'china';
        const specificAreaOption = config.mapOption[_mapName] || {};
        const _a = option || {}, { geo } = _a, restOption = _tslib.__rest(_a, ["geo"]);
        const _b = geoOption || {}, { regions } = _b, restGeoOption = _tslib.__rest(_b, ["regions"]);
        const buMapGeo = Object.assign(Object.assign({ map: _mapName, roam: false, zoom: 1, scaleLimit: { min: 1 }, regions: [
                {
                    name: '南海诸岛',
                    label: { show: false },
                    tooltip: { show: false },
                    itemStyle: { opacity: 0, borderWidth: 0 },
                    emphasis: { itemStyle: { opacity: 0, borderWidth: 0 }, label: { show: false } },
                },
                ...(regions || []),
            ] }, specificAreaOption), restGeoOption);
        return Object.assign({ title: isMaxLevel ? undefined : { text: _mapName }, tooltip: { trigger: 'item' }, toolbox: {
                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();
                        },
                    },
                },
            }, geo: Array.isArray(geo) ? [buMapGeo, ...geo] : [buMapGeo, geo] }, restOption);
    }
    function startGoDownAnimation(onAnimationEnd) {
        setInnerStyle(goDownAnimStartStyle);
        setTimeout(() => {
            setInnerStyle(goDownAnimEndStyle);
            onAnimationEnd();
        }, 0);
    }
    function startGoUpAnimation(onAnimationEnd) {
        setInnerStyle(goUpAnimStartStyle);
        setTimeout(() => {
            setInnerStyle(goUpAnimEndStyle);
            onAnimationEnd();
        }, 0);
    }
    const handleOnEvents = Object.assign({ click: ({ name }) => {
            if (goDownDisabled) {
                return;
            }
            if (Object.prototype.hasOwnProperty.call(config.default, name)) {
                mapStackHelper.push(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_TRANSITION_DURATION = DEFAULT_TRANSITION_DURATION;
exports.default = index;
//# sourceMappingURL=index.js.map
