/**
 * @see https://medium.com/@asimmittal/custom-tooltips-for-google-maps-in-pure-javascript-a8004b8e9458
 * @see https://jsfiddle.net/asimmittal/jm24neys/
 */

// create a global variable that will point to the tooltip in the DOM
let panelEl = null;

// offset along x and y in px
const offset = {
	x: 20,
	y: 20,
};

let coordPropName = null;

export function insertInfoPanel(event, data) {
	if (!panelEl && event) {
		// create the InfoPanel object
		panelEl = document.createElement('div');
		panelEl.className = 'custom-info-panel';
		panelEl.innerHTML = data;

		// get the property which captures the mouse event
		coordPropName = Object.keys(event).filter(p => event[p] instanceof MouseEvent);

		if (coordPropName[0]) {
			panelEl.style.position = 'fixed';
			panelEl.style.top = `${event[coordPropName[0]].clientY + window.scrollY + offset.y}px`;
			panelEl.style.left = `${event[coordPropName[0]].clientX + window.scrollX + offset.x}px`;

			document.body.appendChild(panelEl);
		}
	}
}

export function moveInfoPanel(event) {
	if (panelEl && event && coordPropName[0]) {
		// position it
		panelEl.style.top = `${event[coordPropName[0]].clientY + window.scrollY + offset.y}px`;
		panelEl.style.left = `${event[coordPropName[0]].clientX + window.scrollX + offset.x}px`;
	}
}

export function deleteInfoPanel() {
	if (panelEl) {
		// delete the tooltip if it exists in the DOM
		document.body.removeChild(panelEl);
		panelEl = null;
	}
}

/**
 * @see https://medium.com/@asimmittal/custom-tooltips-for-google-maps-in-pure-javascript-a8004b8e9458
 * @see https://jsfiddle.net/asimmittal/jm24neys/
 */

// create a global variable that will point to the tooltip in the DOM
let panelEl = null;

// offset along x and y in px
const offset = {
	x: 20,
	y: 20,
};

let coordPropName = null;

export function insertInfoPanel(event, data) {
	if (!panelEl && event) {
		// create the InfoPanel object
		panelEl = document.createElement('div');
		panelEl.className = 'custom-info-panel';
		panelEl.innerHTML = data;

		// get the property which captures the mouse event
		coordPropName = Object.keys(event).filter(p => event[p] instanceof MouseEvent);

		if (coordPropName[0]) {
			panelEl.style.position = 'fixed';
			panelEl.style.top = `${event[coordPropName[0]].clientY + offset.y}px`;
			panelEl.style.left = `${event[coordPropName[0]].clientX + offset.x}px`;

			document.body.appendChild(panelEl);
		}
	}
}

export function moveInfoPanel(event) {
	if (panelEl && event && coordPropName[0]) {
		// position it
		panelEl.style.top = `${event[coordPropName[0]].clientY + offset.y}px`;
		panelEl.style.left = `${event[coordPropName[0]].clientX + offset.x}px`;
	}
}

export function deleteInfoPanel() {
	if (panelEl) {
		// delete the tooltip if it exists in the DOM
		document.body.removeChild(panelEl);
		panelEl = null;
	}
}

Remove scrolled pixels from info panel position