const event_actions_popup_width = 100;
const event_actions_popup_height = 260;

const event_actions_popup_styling = `
#eventactionspopup {
	position: fixed;
	max-width: 90%;
	overflow-x: auto;
	z-index: 100;
	background: inherit;
	overflow: hidden;
	border: 1px solid var(--border-normal);
	padding: 0.5rem;
	visibility: hidden;
	display: none;
	opacity: 0;
}

#eventactionspopup[data-shown] {
	visibility: visible;
	display: block;
	opacity: 1;
}

#eventactionspopup .icon.close {
	float: right;
	margin: 0.1rem;
}

#eventactionspopup button.event-action {
	display: block;
	cursor: pointer;
	width: 3rem;
	height: 3rem;
	vertical-align: top;
	margin: 0.5rem;
}

#eventactionspopup button .action-name {
	display: block;
	margin-top: 0.33rem;
	text-transform: uppercase;
	font-size: xx-small;
}
`;

let event_actions_popup;
let event_actions_popup_form;
let event_actions_popup_search_input;
let event_actions_popup_parent_id_input;
let event_actions_popup_emojis_list;
let event_actions_popup_reaction_input;

function open_event_actions_popup(event) {
	const event_id = event.target?.closest("[data-event_id]")?.dataset?.event_id;

	const position = get_best_coords_for_popup({
		target_element: event.target,
		popup: {
			width: event_actions_popup_width,
			height: event_actions_popup_height,
		},
		offset: {
			x: 4,
			y: 4,
		},
	});

	event_actions_popup.dataset.current_event_id = event_id;
	event_actions_popup.style.left = position.x + "px";
	event_actions_popup.style.top = position.y + "px";

	event_actions_popup.dataset.shown = true;
}

function clear_event_actions_popup() {
	if (!event_actions_popup) {
		return;
	}

	delete event_actions_popup.dataset.shown;
}

document.addEventListener("DOMContentLoaded", () => {
	if (!document.getElementById("event-actions-styling")) {
		const style = document.createElement("style");
		style.id = "event-actions-styling";
		style.innerHTML = event_actions_popup_styling;
		document.head.appendChild(style);
	}

	event_actions_popup = document.createElement("div");
	event_actions_popup.id = "eventactionspopup";
	event_actions_popup.innerHTML = `
<div class="event-actions-container">
	<button
		class="event-action"
		data-action="react"
		data-reactions
		data-smart
	>
		<i class="icon circle"></i><span class="action-name">React</span>
	</button>
	<button
		class="event-action"
		data-action="reply"
	>
		<i class="icon reply"></i><span class="action-name">Reply</span>
	</button>
	<button class="event-action mockup" data-action="forward_copy">
		<i class="icon forward-copy"></i
		><span class="action-name">Copy Link</span>
	</button>
	<button class="event-action mockup" data-action="delete">
		<i class="icon trash"></i><span class="action-name">Delete</span>
	</button>
</div>
`;

	document.body.appendChild(event_actions_popup);

	document.querySelector("body").addEventListener("click", (event) => {
		const is_in_the_event_actions_popup = event?.target?.closest("#eventactionspopup");
		if (is_in_the_event_actions_popup) {
			return;
		}

		const is_an_event_actions_button =
			event?.target?.matches("button[commandfor]") ||
			event?.target?.closest("button[commandfor]");
		if (!is_an_event_actions_button) {
			clear_event_actions_popup();
			return;
		}

		event.preventDefault();
		open_event_actions_popup(event);
	});
});