import * as am5 from "@amcharts/amcharts5";
import type { MapPointSeries } from "@amcharts/amcharts5/map";
import type { DataItem } from "@amcharts/amcharts5";
import type { Loc, NewCardPayload, StatusPayload } from "./typing";
import { parsed } from "./utils";




function newState(payload: StatusPayload, loc_state: Loc[]): Loc[] {
	return loc_state.map((loc) => { return loc.name === payload.location_name ? { ...loc, enabled: payload.enabled } : loc })
}


export function launchWs(pointSeries: MapPointSeries, locs: Loc[], label: am5.Label) {
	let state: Loc[] = locs
	const matchingDataItem = (payload: NewCardPayload) => {
		const match = pointSeries.dataItems.find((item) => {
			const context = item.dataContext as Loc
			if (context.name) {
				return context.name === payload.location_name
			}
		})
		return match
	}

	function showNotification(label: am5.Label, container: am5.Container) {
		container.children.push(label);
		label.animate({
			key: "dy",
			from: 0,
			to: -20,
			duration: 800
		});
		label.animate({
			key: "opacity",
			from: 1,
			to: 0,
			duration: 800
		})

	}


	function connect() {
		console.info("Connecting to map websocket")
		const socket = new WebSocket("/map/locs");

		socket.addEventListener("open", () => {
			if (socket.readyState === WebSocket.OPEN) {
				socket.send("p");
			}
		});

		socket.addEventListener("message", (e) => {
			const payload = parsed(e.data)
			switch (payload.notification_type) {
				case "loc_status":
					console.info("Location status change: ")
					console.info(payload.location_name)
					state = newState(payload as StatusPayload, state)
					pointSeries.data.setAll(state);
					break;
				case "new_card":
					console.info("New card created: ")
					console.info(payload.location_name)
					const match = matchingDataItem(payload as NewCardPayload)
					const bullet = match?.bullets?.at(0)
					if (bullet) {
						const container = bullet.get("sprite") as am5.Container
						showNotification(label, container)
					}
					break;
			}
		});

	}

	connect()
}