/**
 * A Leaflet Control, to request fullscreen for map (no CSS, no image)
 *
 * @example new FullscreenControl({ position: "topleft" }).addTo(map);
 */
export class FullscreenControl extends L.Control {
	onAdd() {
		const container = L.DomUtil.create("div", " leaflet-bar");
		const link = L.DomUtil.create("a", undefined, container);
		link.innerHTML = "⛶";
		link.style.fontSize = "15px";
		link.style.fontWeight = "bold";
		link.href = "#";
		link.title = "Fullscreen";
		L.DomEvent.on(link, "click", L.DomEvent.stop);
		L.DomEvent.on(link, "click", this.toggleFullscreen, this);
		L.DomEvent.on(document, "fullscreenchange", this.invalidateSize, this);
		return container;
	}
	onRemove() {
		L.DomEvent.off(document, "fullscreenchange", this.invalidateSize, this);
	}
	toggleFullscreen() {
		if (document.fullscreenElement) {
			document.exitFullscreen();
		} else {
			const map = this._map;
			this._initialBounds = map.getBounds();
			map.getContainer().requestFullscreen();
		}
	}
	invalidateSize() {
		const map = this._map;
		map.invalidateSize();
		if (this._initialBounds) {
			map.fitBounds(this._initialBounds);
		}
	}
}