import { jsx as _jsx } from "react/jsx-runtime";
import React, { createContext, useEffect, useRef, useState } from 'react';
import { Spin } from 'antd';
import { getAMapLoader } from './getAMapLoader';
export const MapContext = createContext(null);
const loadingCss = {
    width: '100%',
    height: '100%',
    display: 'flex',
    alignItems: 'center',
    justifyContent: 'center',
};
export const GDMap = function (props) {
    const { containerClass, children, options = {}, aMapUI = false, aMapLoca = false, loadedCallBack, zoomchange, clickchange, loadingStyle = {}, } = props;
    const optionsRef = useRef(options || {});
    const mapRef = useRef(null);
    const containerEle = useRef(null);
    const [loading, setLoading] = useState('unset');
    useEffect(() => {
        setLoading('loading');
        getAMapLoader({
            aMapUI,
            aMapLoca,
        }).then(() => {
            mapRef.current = new window.AMap.Map(containerEle.current, optionsRef.current);
            if (zoomchange) {
                mapRef.current.on('zoomchange', zoomchange);
            }
            if (clickchange) {
                mapRef.current.on('click', clickchange);
            }
            loadedCallBack && loadedCallBack(mapRef.current);
        });
    }, []);
    return (_jsx("div", Object.assign({ className: containerClass, ref: containerEle }, { children: loading === 'ready' ? (_jsx(MapContext.Provider, Object.assign({ value: mapRef.current }, { children: children }))) : (_jsx("div", Object.assign({ style: Object.assign(Object.assign({}, loadingCss), loadingStyle) }, { children: _jsx(Spin, { size: "large" }) }))) })));
};