<template>
  <div>
    <Banner v-if="banner" />
    <NuxtPage :keepalive="true" />
  </div>
</template>

<script lang="ts" setup>
import ContextMenu from '~/components/ContextMenu.vue';
import { render } from 'vue';
import settingLoad from './utils/settingLoad';

const banner = useState("banner", () => false);

onMounted(() => {
	document.removeEventListener("contextmenu", contextMenuHandler);
	document.addEventListener("contextmenu", (e) => {
		contextMenuHandler(e);
	});
	document.addEventListener("mousedown", (e) => {
		if (e.target instanceof HTMLDivElement && e.target.closest("#context-menu")) return;
		console.log("click");
		console.log("target:", e.target);
		console.log(e.target instanceof HTMLDivElement);
		removeContextMenu();
		if (e.target instanceof HTMLElement && e.target.classList.contains("message-text") && e.target.contentEditable) {
			e.target.contentEditable = "false";
		}
	});
	document.addEventListener("keyup", (e) => {
		const messageReply = document.getElementById("message-reply") as HTMLDivElement;
		if (e.key == "Escape" && messageReply) {
			e.preventDefault();
			messageReply.remove();
		}
	});
});

function contextMenuHandler(e: MouseEvent) {
	e.preventDefault();
	//console.log("Opened context menu");
	//createContextMenu(e, [
	//	{ name: "Wah", callback: () => { return } }
	//]);
}

const currentTheme = settingLoad("selectedThemeId") ?? "dark"
const baseURL = useRuntimeConfig().app.baseURL;

useHead({
  link: [{
		rel: "stylesheet",
		href: `${baseURL}themes/${currentTheme}.css`
	}]
})
</script>

<style>
html,
body {
  font-family: Arial, Helvetica, sans-serif;
  box-sizing: border-box;
  color: var(--text-color);
	background: var(--optional-body-background);
  background-color: var(--chat-background-color);
  margin: 0;
}

*:focus-visible {
	outline: var(--outline-border);
}

a {
  color: aquamarine;
}

.white {
	color: white;
}

.bottom-border {
	border-bottom: 1px solid var(--padding-color);
}

.left-border {
	border-left: 1px solid var(--padding-color);
}

.right-border {
	border-right: 1px solid var(--padding-color);
}

.rounded-corners {
  border-radius: .3rem;
}


.invisible {
	visibility: hidden;
}

</style>
