const renderingByType = {
	relay: (alias, deviceResp) => {
		let channels = "";
		for(let channel of deviceResp.channels) {
			const channelState = channel.state == "off" ? "OFF" : "ON";
			const channelStateClass = channel.state == "on" ? "badge-success" : "";
			const chId = deviceResp.channels.length > 1 ? `${channel.id}:` : "";
			channels += `
				<span class="badge ${channelStateClass}">${chId}<b>${channelState}</b></span>
			`;
		}

		return `<div class="channels f-grid g-2">${channels}</div>`;
	},

	button: (alias, deviceResp) => {
		const channelClassMap = {
			enabled: "badge-success",
			disabled: "",
			mute: "badge-primary-outline",
			waiting: "badge-warning",
			error: "badge-error"
		};

		let channels = "";
		for(let channel of deviceResp.channels) {
			channels += `
				<span class="badge ${channelClassMap[channel.indicator]}">${channel.id}:<b>${channel.indicator}</b></span>
			`;
		}

		return `<div class="channels f-grid g-2">${channels}</div>`;
	},

	sensor: (alias, deviceResp) => {
		/*
		{"status":"ok","indicators":"ok","sensors":{
			"light":{"online":true,"level":5,"lux":240.17,"percent":48},
			"temperature":{"online":true,"current":26.44,"dynamics":"constant","dynamics_val":0},
			"pressure":{"online":true,"current":1000.69,"dynamics":"constant","dynamics_val":0},
			"humidity":{"online":true,"current":43.02,"dynamics":"constant","dynamics_val":0},
			"radar":{"online":true,"presence":true,"activity_score":1,"activity_score_current":1,"activity_score_dynamics":"constant","distance_m":0},
			"microphone":{"online":true,"current_noise":53,"noise_level":7,"noise_level_dbi":50,"noise_dynamics":"constant"}}}
		 */

		const dynamics = dynamics => {
			switch(dynamics) {
				case "increasing": return `<i class="ph ph-caret-up"></i>`;
				case "decreasing": return `<i class="ph ph-caret-down"></i>`;
			}

			return ``;
		};

		const presence = deviceResp.sensors.radar.presence 
			? `<i class="ph ph-user-square"></i>${deviceResp.sensors.radar.activity_score}${dynamics(deviceResp.sensors.radar.activity_score_dynamics)}` 
			: '<i class="ph ph-square"></i>'; 
		const temperature = deviceResp.sensors.temperature.current + "°C" + dynamics(deviceResp.sensors.temperature.dynamics); 
		const humidity = deviceResp.sensors.humidity.current + "%" + dynamics(deviceResp.sensors.humidity.dynamics); 
		const pressure = deviceResp.sensors.pressure.current + "hpa" + dynamics(deviceResp.sensors.pressure.dynamics); 
		const light = deviceResp.sensors.light.percent + "%"; 
		const noise = deviceResp.sensors.microphone.current_noise + "dBi" + dynamics(deviceResp.sensors.microphone.noise_dynamics); 

		let sensors = `
			<span class="badge badge-primary">${presence}</span>
			<span class="badge badge-primary"><i class="ph ph-thermometer"></i>${temperature}</span>
			<span class="badge badge-primary"><i class="ph ph-drop-half-bottom"></i>${humidity}</span>
			<span class="badge badge-primary">${pressure}</span>
			<span class="badge badge-primary"><i class="ph ph-lightbulb"></i>${light}</span>
			<span class="badge badge-primary"><i class="ph ph-ear"></i>${noise}</span>
		`;

		return `<div class="channels f-grid g-2">${sensors}</div>`;
	},
	hatch: (alias, deviceResp) => {
	  const hatchStateBadge = (deviceResp.hatch.state.indexOf("open") != -1)
	  	? `<span class="badge badge-warning">${deviceResp.hatch.state} - ${deviceResp.hatch.position_pct}%</span>`
	  	: `<span class="badge badge-primary">${deviceResp.hatch.state}</span>`;

	  return `<div class="channels f-grid g-2">${hatchStateBadge}</div>`;
	}
};

function initEventHandlers(component) {
	component.addEventListener("click", e => {
		e.currentTarget.deviceStateComponent.create();
	});
}

function stateRendering(deviceType, deviceAlias, deviceResponse) {
	if(!deviceResponse || typeof deviceResponse !== "object" || deviceResponse.status !== "ok") {
		return null;
	}

	try {
		return typeof renderingByType[deviceType] != "undefined"
			? renderingByType[deviceType](deviceAlias, deviceResponse)
			: "Unknown device type<br>" + JSON.stringify(deviceResponse);
	} catch(e) {
		console.error("stateRendering", deviceType, deviceResponse, e);
		return null;
	}
}

export default function deviceStateComponent(sh_api, deviceId, deviceType, onReady) {
	const component = Helper.template.createElement("div", {
		class: "component device-state-component"
	}, "");
	let initialReadyCallback = onReady;

	component.deviceStateComponent = {
		create: () => {
			component.innerHTML = Helper.template.circleLoaderHTML();
			let isDone = false;
			const done = () => {
				if(isDone) {
					return;
				}

				isDone = true;
				if(typeof initialReadyCallback === "function") {
					initialReadyCallback();
					initialReadyCallback = null;
				}
			};

			sh_api.devices.status(deviceId, (err, resp, meta) => {
				console.log("sh_api.devices.status", err, resp);

				const device = resp?.data?.device;
				const html = stateRendering(deviceType, device?.alias, device?.device_response);

				if(err || !html) {
					component.innerHTML = `
						<span class="badge badge-error"><i class="ph ph-warning-octagon fs-lg normalize"></i> Loading Error</span>
					`;
					done();
					return console.error("deviceStateComponent", `DeviceID ${deviceId}`, err || resp);
				}

				component.innerHTML = html;
				initEventHandlers(component);
				done();
			});
		}
	}

	component.deviceStateComponent.create();

	return component;
}
