<template>
	<div
		class="wcc-popper-container"
		@mouseleave="hover && closePopper()"
		ref="popperContainer"
	>
		<div
			ref="triggerNode"
			@mouseover="hover && openPopper()"
			class="wcc-poppper-trigger"
		>
			<slot>
				<div class="wcc-popper-icon"></div>
			</slot>
		</div>
		<Transition name="fade">
			<div v-if="shouldShowPopper" class="wcc-popper" ref="popperNode">
				<slot name="content">
					{{ content }}
				</slot>
				<div class="wcc-popper-arrow" data-popper-arrow></div>
			</div>
		</Transition>
	</div>
</template>
<script>
import { createPopper } from "@popperjs/core/lib/popper-lite.js";
import arrow from "@popperjs/core/lib/modifiers/arrow";
import offset from "@popperjs/core/lib/modifiers/offset";

export default {
	name: "BasePopper",
	components: {},
	props: {
		content: {
			type: String,
			default: "",
		},
		position: {
			type: String,
			default: "top",
		},
		hover: {
			type: Boolean,
			default: true,
		},
	},
	data() {
		return {
			popperId: null,
			popper: null,
			isOpen: false,
		};
	},
	computed: {
		shouldShowPopper() {
			return this.isOpen;
		},
	},
	ready() {
		this.$nextTick(() => {
			if (this.showPopper) {
				this.initPopper();
			}
		});
	},
	methods: {
		initPopper() {
			this.$nextTick(function () {
				this.popper = createPopper(
					this.$el,
					this.$el.querySelector(".wcc-popper"),
					{
						placement: this.position || "bottom",
						removeOnDestroy: true,
						modifiers: [
							arrow,
							{
								name: "arrow",
								options: {
									padding: 10,
								},
							},
							offset,
							{
								name: "offset",
								options: {
									offset: [0, 8],
								},
							},
						],
					}
				);
			});
		},
		destroyPopper() {
			if (!this.popper) return;
			this.popper.destroy();
			this.popper = null;
		},
		openPopper() {
			this.isOpen = true;
			this.initPopper();
		},
		closePopper() {
			this.isOpen = false;
		},
	},
};
</script>
<style lang="scss">
.wcc-popper-container {
	display: inline-block;
	vertical-align: middle;
	margin-left: 5px;
}
.wcc-popper {
	color: $tooltip-color;
	text-align: center;
	padding: 8px 12px;
	border-radius: 4px;
	vertical-align: middle;
	max-width: 240px;
	font-size: 12px;
	font-weight: 400;
	line-height: 16px;
	background: $tooltip-background-color;
	z-index: 9999;
}
.wcc-popper-arrow {
	border-width: 5px;
	border-style: solid;
}
/* Top arrow */
.wcc-popper[data-popper-placement^="top"] > .wcc-popper-arrow {
	border-color: $tooltip-background-color transparent transparent transparent;
	bottom: -10px;
}
/* Bottom arrow */
.wcc-popper[data-popper-placement^="bottom"] > .wcc-popper-arrow {
	top: -10px;
	border-color: transparent transparent $tooltip-background-color transparent;
}
/* Left arrow */
.wcc-popper[data-popper-placement^="left"] > .wcc-popper-arrow {
	border-color: transparent transparent transparent $tooltip-background-color;
	right: -10px;
}
/* Right arrow */
.wcc-popper[data-popper-placement^="right"] > .wcc-popper-arrow {
	border-color: transparent $tooltip-background-color transparent transparent;
	left: -10px;
}
.wcc-popper-icon {
	background-image: url("~@/assets/tooltip.svg");
	width: 12px;
	height: 12px;
}
.wcc-poppper-trigger {
	display: inline-block;
	width: 100%;
}
</style>