import { data } from './data';
import { ECOption, EMapOptions } from './useMap';

function useOption() {
	const heatmap: (mapOptions: EMapOptions) => ECOption = (mapOptions) => {
		var points = [].concat.apply(
			[],
			data.map(function (track: any) {
				return track.map(function (seg: { coord: number[] }) {
					const [x, y] = seg.coord;
					return [x - 3.73, y + 9.7, 1];
				});
			})
		);

		return {
			animation: false,
			lmap: {
				center: [10, 60], // [lng, lat]
				zoom: 4,
				resizeEnable: true, // automatically handles browser window resize.
				renderOnMoving: true,
				echartsLayerInteractive: true, // Default: true
				largeMode: false, // Default: false

				...mapOptions?.leaflet,
			},
			title: {
				text: '热力图',
			},
			visualMap: {
				show: false,
				top: 'top',
				min: 0,
				max: 5,
				seriesIndex: 0,
				calculable: true,
				inRange: {
					color: ['blue', 'blue', 'green', 'yellow', 'red'],
				},
			},
			series: [
				{
					type: 'heatmap',
					coordinateSystem: 'lmap',
					data: points,
					pointSize: 5,
					blurSize: 6,
				},
			],
		};
	};

	const scatter: (mapOptions?: EMapOptions) => ECOption = (mapOptions) => ({
		lmap: {
			center: [10, 60], // [lng, lat]
			zoom: 4,
			resizeEnable: true, // automatically handles browser window resize.
			renderOnMoving: true,
			echartsLayerInteractive: true, // Default: true
			largeMode: false, // Default: false

			...mapOptions?.leaflet,
		},
		title: {
			text: '散点图',
		},
		series: [
			{
				type: 'scatter',
				// use `lmap` as the coordinate system
				coordinateSystem: 'lmap',
				// data items [[lng, lat, value], [lng, lat, value], ...]
				data: [
					[39.926474, 116.403283, 400],
					[10, 60, 8],
					[10.1, 60, 20],
				],
				encode: {
					// encode the third element of data item as the `value` dimension
					value: 2,
				},
			},
			{
				type: 'effectScatter',
				// use `lmap` as the coordinate system
				coordinateSystem: 'lmap',
				// data items [[lng, lat, value], [lng, lat, value], ...]
				data: [
					[39.926474, 116, 400],
					[11, 60, 8],
					[11.1, 60, 20],
				],
				encode: {
					// encode the third element of data item as the `value` dimension
					value: 2,
				},
			},
		],
	});

	return {
		scatter,
		heatmap,
	};
}

export default useOption;
