import type { tntExplosionAlert } from "web/alerts/types";
import type { AlertRunner } from "./index";

const duration = 1500;
const volume = 0.1;

export default async function execute(
	_alert: tntExplosionAlert,
): Promise<AlertRunner> {
	const parentDiv = document.createElement("div");
	parentDiv.className = "tntExplosionAlert";
	parentDiv.innerHTML = `
    <style>
      .tntExplosionAlert {
        font-family: "Jersey 15";
        position: absolute;
        justify-content: center;
        align-content: center;
        text-align: center;
      }
    </style>
  `;

	const video = document.createElement("video");

	video.volume = volume;
	video.src = "/alerts/assets/tnt.mp4";
	video.autoplay = true;
	video.height = 800;
	video.width = 450;

	parentDiv.appendChild(video);

	const randomX =
		Math.floor(Math.random() * (window.innerWidth - 450 - 300)) + 150;
	const randomY =
		Math.floor(Math.random() * (window.innerHeight - 800 - 300)) + 150;

	parentDiv.style.left = `${randomX}px`;
	parentDiv.style.top = `${randomY}px`;

	return { blocking: false, duration, alertDiv: parentDiv };
}
