import { __rest } from '../../_virtual/_tslib.js';
import { jsx } from 'react/jsx-runtime';
import EChartsReactCore from 'echarts-for-react/lib/core';
import { HeatmapChart, MapChart } from 'echarts/charts';
import { GeoComponent, GridComponent, LegendComponent, TitleComponent, ToolboxComponent, TooltipComponent } from 'echarts/components';
import * as echarts from 'echarts/core';
import { UniversalTransition } from 'echarts/features';
import { CanvasRenderer } from 'echarts/renderers';
import React, { useState, useRef, useImperativeHandle, useEffect } from 'react';
import buMap, { mapOption } from './config.js';

echarts.use([
    GeoComponent,
    GridComponent,
    LegendComponent,
    TitleComponent,
    ToolboxComponent,
    TooltipComponent,
    HeatmapChart,
    MapChart,
    CanvasRenderer,
    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 = __rest(props, ["goDownDisabled", "geoOption", "onMapLevelChange", "style", "option", "onEvents"]);
    const [innerOption, setInnerOption] = useState({});
    const [innerStyle, setInnerStyle] = useState(containerStyle);
    const echartsReactCoreRef = useRef(null);
    const mapStackRef = useRef([]);
    useImperativeHandle(ref, () => {
        var _a;
        return ({
            echartsInstance: (_a = echartsReactCoreRef.current) === null || _a === void 0 ? void 0 : _a.getEchartsInstance(),
            backToUpperLevel: () => {
                mapStackHelper.pop();
            },
        });
    });
    useEffect(() => {
        initMap();
        function initMap() {
            if (!echarts.getMap('china')) {
                // @ts-ignore
                echarts.registerMap('china', buMap.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(buMap, mapName)) {
            if (!echarts.getMap(mapName)) {
                // @ts-ignore
                echarts.registerMap(mapName, buMap[mapName]);
            }
            setInnerOption(generateMapOption({ mapName }));
        }
    }
    function generateMapOption(_option) {
        const { mapName: _mapName = 'china' } = _option || {};
        const isMaxLevel = _mapName === 'china';
        const specificAreaOption = mapOption[_mapName] || {};
        const _a = option || {}, { geo } = _a, restOption = __rest(_a, ["geo"]);
        const _b = geoOption || {}, { regions } = _b, restGeoOption = __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(buMap, name)) {
                mapStackHelper.push(name);
            }
        } }, onEvents);
    return (jsx(EChartsReactCore, Object.assign({ ref: echartsReactCoreRef, style: Object.assign(Object.assign({}, innerStyle), style), echarts: echarts, option: innerOption, onEvents: handleOnEvents }, restProps)));
});

export { DEFAULT_TRANSITION_DURATION, index as default };
//# sourceMappingURL=index.js.map
