<template>
	<div class="modal min-h-screen" v-if="visible">
		<component :is="component"></component>
	</div>
</template>

<script lang="ts">
import { Mutation } from "../store";
import { defineComponent } from "vue";
import { mapMutations, mapState } from "vuex";
import { modals } from "./modals";

export default defineComponent({
	name: "AppModal",
	components: modals,
	computed: {
		...mapState({
			component: "modalName",
			visible: "modalVisible"
		})
	},
	methods: {
		modalClicked() {
			console.log("Modal clicked");
		},
		// ...mapMutations({
		// 	hide: Mutation.ModalHide
		// })
	},
	mounted() {
		document.addEventListener("keydown", (event: KeyboardEvent) => {
			if (event.key != "Escape") {
				return;
			}
			// this.hide();
		});
	}
});
</script>

<style lang="postcss">
.modal {
	@apply fixed inset-0 flex flex-col;
	background: rgba(0, 0, 0, 0.5);
}
</style>
