import { use, init, ComposeOption } from 'echarts/core';

import { ScatterChart, ScatterSeriesOption, EffectScatterChart, EffectScatterSeriesOption, HeatmapChart } from 'echarts/charts';

import { TooltipComponent, TitleComponentOption, TitleComponent, VisualMapComponent } from 'echarts/components';

import { CanvasRenderer } from 'echarts/renderers';

import { LeafletComponent, LeafletComponentOption } from '../leafletchart/export';
import L, { CRS, MapOptions } from 'leaflet';
import { HeatmapSeriesOption } from 'echarts';

export type EMapOptions = LeafletComponentOption<MapOptions & { getCrs?: () => CRS }>;
export type ECOption = ComposeOption<ScatterSeriesOption | EffectScatterSeriesOption | TitleComponentOption | HeatmapSeriesOption> & EMapOptions;

function useMap(dom: HTMLElement, chartOptions: ECOption) {
	use([CanvasRenderer, TooltipComponent, LeafletComponent, ScatterChart, EffectScatterChart, TitleComponent, HeatmapChart, VisualMapComponent]);

	const chart = init(dom);
	chart.setOption(chartOptions);
	// @ts-ignore
	const lmapComponent = chart.getModel().getComponent('lmap');
	// @ts-ignore
	const lmap: L.Map = lmapComponent.getLeaflet();

	return {
		map: lmap,
		chart,
	};
}

export default useMap;
