<template>
	<div :class="popoverClass">
		<div
			class="wcc-popover-trigger"
			@mouseover="hover = true"
			@mouseleave="mouseLeave"
		>
			<slot />
		</div>
		<div
			class="wcc-popover-content"
			:data-target="target"
			v-if="hover"
			@mouseover="hoverInner = true"
			@mouseleave="resetHover(true)"
		>
			<slot name="content"></slot>
		</div>
	</div>
</template>

<script>
export default {
	name: "Popover",
	components: {},
	props: {
		enabled: {
			type: Boolean,
			default: false,
		},
		target: {
			type: String,
		},
	},

	data() {
		return {
			hover: false,
			hoverInner: false,
		};
	},
	mounted() {
		// Update stats.
		this.calculateOffset();
	},
	computed: {
		/**
		 * Get feature classes based of different conditions.
		 *
		 * @since 3.0.0
		 *
		 * @return {*}
		 */
		popoverClass() {
			return {
				"wcc-popover": true,
				"wcc-popover-disabled": this.enabled === false,
			};
		},
	},
	methods: {
		calculateOffset() {
			const el = document.getElementById(this.target);
			if (!el) return;
			const container = document.querySelector(
				".wcc-popover-content[data-target=" + this.target + "]"
			);
			if (!container) return;
			var left = el.getBoundingClientRect().x - (45 / 100) * screen.width;
			container.style.left = left + "px";
		},
		mouseLeave() {
			setTimeout(() => this.resetHover(), 100);
		},
		resetHover(status = false) {
			if (status) {
				this.hoverInner = false;
			}
			if (false === this.hoverInner) {
				this.hover = false;
			}
		},
	},
};
</script>
<style lang="scss" scoped>
.wcc-popover {
	position: relative;
}
.wcc-popover-content {
	padding: 15px;
	min-width: 260px;
	position: absolute;
	background: #fff;
	top: 20px;
	box-shadow: 0px 0 10px 0px rgba(0, 0, 0, 0.1);
	border-radius: 3px;
	border: 1px solid #f1f1f1;
	z-index: 999;
}
</style>