<template>
	<div @mouseleave="hoverMe(false)" @mouseover="hoverMe(true)" class="calendar-month-week-grid-day-parent">
		<div
			v-if="positionGrid >= 1 && positionGrid <= lastDayOfMonth"
			:class="{
				afterToday: isInfinity || afterToday,
				isSelected,
				isRange,
				validCheckout,
				'calendar-month-week-grid-day': true,
				today: today,
				blocked: day.isBlocked,
				blockedMorning: day.isBlockedMorning,
				blockedAfternoon: day.isBlockedAfternoon,
				blockedFull: day.isBlockedFull,
				restricted: day.isRestricted || day.isCheckoutUnavailable,
				booked: day.isBooked,
				checkin: day.isCheckin,
				checkout: day.isCheckout,
				bookingAfternoon: day.isBookingAfternoon,
				bookingMorning: day.isBookingMorning,
				bookedFull: day.isBookedFull,
				cleaningAfternoon: day.isCleaningAfternoon,
				cleaningMorning: detailed ? day.isCleaningMorning : false,
				cleaning: detailed ? day.isCleaning : false,
			}"
			v-on="listeners"
		>
			<div :id="elementId">
				{{ positionGrid }}
			</div>
			<v-tooltip
				v-if="day.summary"
				ref="tooltip"
				:target="elementId"
				:triggers="tooltipTrigger"
				activator="parent"
				location="top"
			>
				{{ day.summary }}
			</v-tooltip>
		</div>
		<div v-else>&nbsp;</div>
	</div>
</template>

<script>
export default {
	name: "CalendarDay",
	props: {
		afterToday: {
			type: Boolean,
			default: false,
		},
		isSelected: {
			type: Boolean,
			default: false,
		},
		isInfinity: {
			type: Boolean,
			default: false,
		},
		isRange: {
			type: Boolean,
			default: false,
		},
		picker: {
			type: Boolean,
			default: false,
		},
		validCheckout: {
			type: Boolean,
			default: false,
		},
		lastDayOfMonth: {},
		today: {},
		day: {
			type: Object,
			default: () => ({}),
		},
		positionGrid: {},
		mindex: {},
		gi: {},
		g: {},
		detailed: {},
	},
	data() {
		return {
			show: false,
		};
	},
	computed: {
		elementId() {
			return `${this.picker ? "picker_" : ""}date_${this.mindex}_${
				this.gi
			}`;
		},
		listeners() {
			const vm = this;
			const listeners = {
				click: () => {
					if ((!vm.afterToday && !vm.isInfinity) || vm.today)
						return false;
					vm.$emit("click", {...vm.$props});
				},
			};

			return {...vm?.$listeners, ...listeners};
		},
		tooltipTrigger() {
			return this.isSelected ? "manual" : "hover";
		},
	},
	watch: {
		isSelected(value) {
			if (value) this.showTooltip();
		},
	},
	methods: {
		hoverMe(isHover) {
			this.$emit("hover", {isHover, ...this.$props});
		},
		showTooltip() {
			this.show = !!this.day.summary;
			setTimeout(() => {
				this.show = false;
			}, 5000);
		},
	},
};
</script>
