import { useState } from "preact/hooks";

import "./index.css";

export default () => {
	const [heartrate, setHeartrate] = useState(0);

	const ws = new WebSocket(
		"wss://app.hyperate.io/socket/websocket?token=wv39nM6iyrNJulvpmMQrimYPIXy2dVrYRjkuHpbRapKT2VSh65ngDGHdCdCtmEN9",
	);

	let hrTimeout: ReturnType<typeof setTimeout>;

	const setHrInterval = () => {
		hrTimeout = setTimeout(() => {
			return setHeartrate(0);
		}, 6000);
	};

	ws.onopen = () => {
		ws.send(
			JSON.stringify({
				topic: "hr:0BCA",
				event: "phx_join",
				payload: {},
				ref: 0,
			}),
		);

		setInterval(() => {
			ws.send(
				JSON.stringify({
					topic: "phoenix",
					event: "heartbeat",
					payload: {},
					ref: 0,
				}),
			);
		}, 10000);

		return setHrInterval();
	};

	ws.onmessage = ({ data }) => {
		const { event, payload } = JSON.parse(data);
		switch (event) {
			case "hr_update": {
				clearTimeout(hrTimeout);
				setHrInterval();
				setHeartrate(payload.hr);
				break;
			}
			default: {
				break;
			}
		}
	};

	return (
		<>
			<div
				style={heartrate === 0 ? "display:none" : `--bpm: ${heartrate};`}
				class="heart"
			>
				♥️
				<br />
				<span>{heartrate} BPM</span>
			</div>
		</>
	);
};