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 (
		<div className={containerClass} ref={containerEle}>
			{loading === 'ready' ? (
				<MapContext.Provider value={mapRef.current}>
					{children}
				</MapContext.Provider>
			) : (
				<div style={{ ...loadingCss, ...loadingStyle }}>
					<Spin size="large" />
				</div>
			)}
		</div>
	);
};