<script lang="ts">
import {defineComponent, PropType} from 'vue';
import {TolNode} from '../lib';

export default defineComponent({
	props: {
		tolNode: {type: Object as PropType<TolNode>},
		options: {type: Object, required: true},
	},
	computed: {
		imgStyles(): Record<string,string> {
			return {
				backgroundImage: 'url(\'/img/' + this.tolNode.name.replaceAll('\'', '\\\'') + '.png\')',
				width: this.options.infoModalImgSz + 'px',
				height: this.options.infoModalImgSz + 'px',
				backgroundSize: 'cover',
				borderRadius: this.options.borderRadius + 'px',
			}
		},
	},
	methods: {
		closeClicked(evt: Event){
			if (evt.target == this.$el || evt.target == this.$refs.closeIcon){
				this.$emit('info-modal-close');
			}
		},
	},
	emits: ['info-modal-close'],
});
</script>

<template>
<div class="fixed left-0 top-0 w-full h-full bg-black/40" @click="closeClicked">
	<div class="absolute left-1/2 -translate-x-1/2 w-4/5 top-1/2 -translate-y-1/2 p-4
		bg-stone-50 rounded-md shadow shadow-black">
		<div class="absolute top-2 right-2 w-[24px] h-[24px] [font-size:24px] [line-height:24px] text-center
				font-bold hover:cursor-pointer"
			@click="closeClicked" ref="closeIcon">&times;</div>
		<h1 class="text-center text-xl font-bold mb-2">{{tolNode.name}}</h1>
		<hr class="mb-4 border-stone-400"/>
		<div :style="imgStyles" class="float-left mr-4" alt="an image"></div>
		<div>
			Lorem ipsum dolor sit amet, consectetur adipiscing
			elit, sed do eiusmod tempor incididunt ut labore
			et dolore magna aliqua. Ut enim ad minim veniam,
			quis nostrud exercitation ullamco laboris nisi ut
			aliquip ex ea commodo consequat.
		</div>
	</div>
</div>
</template>
