<script lang="ts">
import {defineComponent, PropType} from 'vue';
import InfoIcon from './icon/InfoIcon.vue';
import {LayoutNode} from '../layout';
import type {LayoutOptions} from '../layout';

export default defineComponent({
	props: {
		layoutNode: {type: Object as PropType<LayoutNode>, required: true},
		lytOpts: {type: Object as PropType<LayoutOptions>, required: true},
		uiOpts: {type: Object, required: true},
		nonAbsPos: {type: Boolean, default: false},
		highlight: {type: Boolean, default: false},
		inTransition: {type: Boolean, default: false},
	},
	computed: {
		isExpandable(){
			return this.layoutNode.tolNode.children.length > 0;
		},
		styles(): Record<string,string> {
			let placementStyles;
			if (!this.layoutNode.hidden){
				placementStyles = {
					position: 'absolute',
					left: this.layoutNode.pos[0] + 'px',
					top: this.layoutNode.pos[1] + 'px',
					width: this.layoutNode.dims[0] + 'px',
					height: this.layoutNode.dims[1] + 'px',
					visibility: 'visible',
				};
			} else {
				placementStyles = {
					position: 'absolute',
					left: '0',
					top: '0',
					width: '0',
					height: '0',
					visibility: 'hidden',
				};
			}
			if (this.nonAbsPos){
				placementStyles.position = 'static';
			}
			return {
				...placementStyles,
				// Image
				backgroundImage:
					'linear-gradient(to bottom, rgba(0,0,0,0.4), rgba(0,0,0,0) 40%, rgba(0,0,0,0) 60%, rgba(0,0,0,0.4) 100%),' +
					'url(\'/img/' + this.layoutNode.tolNode.name.replaceAll('\'', '\\\'') + '.png\')',
				backgroundSize: 'cover',
				// Child layout
				display: 'flex',
				flexDirection: 'column',
				// Transition related
				transitionDuration: this.uiOpts.transitionDuration + 'ms',
				transitionProperty: 'left, top, width, height, visibility',
				transitionTimingFunction: 'ease-out',
				zIndex: this.inTransition ? '1' : '0',
				overflow: 'visible',
				// Other
				borderRadius: this.uiOpts.borderRadius + 'px',
				boxShadow: this.highlight ? this.uiOpts.shadowHighlight :
					(this.layoutNode.hasFocus ? this.uiOpts.shadowFocused : this.uiOpts.shadowNormal),
			};
		},
		headerStyles(): Record<string,string> {
			return {
				height: (this.uiOpts.imgTileFontSz + this.uiOpts.imgTilePadding * 2) + 'px',
				lineHeight: this.uiOpts.imgTileFontSz + 'px',
				fontSize: this.uiOpts.imgTileFontSz + 'px',
				padding: this.uiOpts.imgTilePadding + 'px',
				color: this.isExpandable ? this.uiOpts.expandableImgTileColor : this.uiOpts.imgTileColor,
				// For ellipsis
				overflow: 'hidden',
				textOverflow: 'ellipsis',
				whiteSpace: 'nowrap',
			};
		},
	},
	methods: {
		onInfoClick(evt: Event){
			this.$emit('info-icon-clicked', this.layoutNode);
		},
		onMouseEnter(){
			this.$emit('tile-mouse-enter');
		},
		onMouseLeave(){
			this.$emit('tile-mouse-leave');
		},
		onMouseDown(){
			this.$emit('tile-mouse-down');
		},
		onMouseUp(){
			this.$emit('tile-mouse-up');
		},
	},
	components: {InfoIcon, },
	emits: [
		'info-icon-clicked',
		'tile-mouse-enter', 'tile-mouse-leave', 'tile-mouse-down', 'tile-mouse-up',
	],
});
</script>

<template>
<div :style="styles" :class="isExpandable ? ['hover:cursor-pointer'] : []"
	@mouseenter="onMouseEnter" @mouseleave="onMouseLeave"
	@mousedown="onMouseDown" @mouseup="onMouseUp">
	<h1 :style="headerStyles">{{layoutNode.tolNode.name}}</h1>
	<info-icon
		class="w-[18px] h-[18px] mt-auto mb-[2px] mr-[2px] self-end
			text-white/30 hover:text-white hover:cursor-pointer"
		@click.stop="onInfoClick" @mousedown.stop @mouseup.stop/>
</div>
</template>
