<script setup lang="ts">
import { Instance, Modifier, Placement } from '@popperjs/core';
import arrow from '@popperjs/core/lib/modifiers/arrow';
import computeStyles from '@popperjs/core/lib/modifiers/computeStyles';
import eventListeners from '@popperjs/core/lib/modifiers/eventListeners';
import flip from '@popperjs/core/lib/modifiers/flip';
import offset from '@popperjs/core/lib/modifiers/offset';
import popperOffsets from '@popperjs/core/lib/modifiers/popperOffsets';
import preventOverflow from '@popperjs/core/lib/modifiers/preventOverflow';
import { createPopper } from '@popperjs/core/lib/popper-lite';
import { debounce } from 'lodash';
import { nanoid } from 'nanoid/non-secure';
import { computed, nextTick, onUnmounted, ref, Ref, watch } from 'vue';

interface Props {
	/** Where to position the popper */
	placement?: Placement;
	/** Model the open state */
	modelValue?: boolean;
	/** Close the menu when clicking outside of the menu */
	closeOnClick?: boolean;
	/** Close the menu when clicking the content of the menu */
	closeOnContentClick?: boolean;
	/** Attach the menu to an input */
	attached?: boolean;
	/** Show an arrow pointer */
	showArrow?: boolean;
	/** Menu does not appear */
	disabled?: boolean;
	/** Activate the menu on a trigger */
	trigger?: 'hover' | 'click' | 'keyDown' | null;
	/** Time in ms before menu activates after trigger */
	delay?: number;
	/** Offset from the top */
	offsetY?: number;
	/** Offset from the left */
	offsetX?: number;
	/** Removes the scrollbar */
	fullHeight?: boolean;
	/** Removes any styling from the menu */
	seamless?: boolean;
}

const props = withDefaults(defineProps<Props>(), {
	placement: 'bottom',
	modelValue: undefined,
	closeOnClick: true,
	closeOnContentClick: true,
	trigger: null,
	delay: 0,
	offsetY: 8,
	offsetX: 0,
});

const emit = defineEmits(['update:modelValue']);

const activator = ref<HTMLElement | null>(null);
const reference = ref<HTMLElement | null>(null);

const virtualReference = ref({
	getBoundingClientRect() {
		return {
			top: 0,
			left: 0,
			bottom: 0,
			right: 0,
			width: 0,
			height: 0,
		};
	},
});

const id = computed(() => nanoid());
const popper = ref<HTMLElement | null>(null);

const {
	start,
	stop,
	styles,
	arrowStyles,
	placement: popperPlacement,
} = usePopper(
	reference,
	popper,
	computed(() => ({
		placement: props.placement,
		attached: props.attached,
		arrow: props.showArrow,
		offsetY: props.offsetY,
		offsetX: props.offsetX,
	}))
);

const { isActive, activate, deactivate, toggle } = useActiveState();

defineExpose({ activator, id, activate, deactivate });

watch(isActive, (newActive) => {
	if (newActive === true) {
		reference.value = (activator.value?.children[0] as HTMLElement) || virtualReference.value;

		nextTick(() => {
			popper.value = document.getElementById(id.value);
		});
	}
});

const { onClick, onPointerEnter, onPointerLeave } = useEvents();

function useActiveState() {
	const localIsActive = ref(false);

	const isActive = computed<boolean>({
		get() {
			if (props.modelValue !== undefined) {
				return props.modelValue;
			}

			return localIsActive.value;
		},
		async set(newActive) {
			localIsActive.value = newActive;
			emit('update:modelValue', newActive);
		},
	});

	watch(
		popper,
		async () => {
			if (popper.value !== null) {
				await start();
			} else {
				stop();
			}
		},
		{ immediate: true }
	);

	return { isActive, activate, deactivate, toggle };

	function activate(event?: MouseEvent) {
		if (event) {
			virtualReference.value = {
				getBoundingClientRect() {
					return {
						top: event.clientY,
						left: event.clientX,
						bottom: 0,
						right: 0,
						width: 0,
						height: 0,
					};
				},
			};
		}

		isActive.value = true;
	}

	function deactivate() {
		isActive.value = false;
	}

	function toggle() {
		if (props.disabled === true) return;
		isActive.value = !isActive.value;
	}
}

function onClickOutsideMiddleware(e: Event) {
	return !activator.value?.contains(e.target as Node);
}

function onContentClick(e: Event) {
	e.stopPropagation();

	if (e.target !== e.currentTarget) {
		deactivate();
	}
}

function useEvents() {
	const isHovered = ref(false);

	watch(
		isHovered,
		debounce((newHoveredState) => {
			if (newHoveredState) {
				if (!isActive.value) activate();
			} else {
				deactivate();
			}
		}, props.delay)
	);

	return { onClick, onPointerLeave, onPointerEnter };

	function onClick() {
		toggle();
	}

	function onPointerEnter(event: Event) {
		event.stopPropagation();
		isHovered.value = true;
	}

	function onPointerLeave(event: Event) {
		event.stopPropagation();
		isHovered.value = false;
	}
}

function usePopper(
	reference: Ref<HTMLElement | null>,
	popper: Ref<HTMLElement | null>,
	options: Readonly<
		Ref<
			Readonly<{
				placement: Placement;
				attached: boolean;
				arrow: boolean;
				offsetY: number;
				offsetX: number;
			}>
		>
	>
): Record<string, any> {
	const popperInstance = ref<Instance | null>(null);
	const styles = ref({});
	const arrowStyles = ref({});

	// The internal placement can change based on the flip / overflow modifiers
	const placement = ref(options.value.placement);

	onUnmounted(() => {
		stop();
	});

	watch(
		options,
		() => {
			popperInstance.value?.setOptions({
				placement: options.value.attached ? 'bottom-start' : options.value.placement,
				modifiers: getModifiers(),
			});
		},
		{ immediate: true }
	);

	const observer = new MutationObserver(() => {
		popperInstance.value?.forceUpdate();
	});

	return { popperInstance, placement, start, stop, styles, arrowStyles };

	function start() {
		return new Promise((resolve) => {
			popperInstance.value = createPopper(reference.value!, popper.value!, {
				placement: options.value.attached ? 'bottom-start' : options.value.placement,
				modifiers: getModifiers(resolve),
				strategy: 'fixed',
			});

			popperInstance.value.forceUpdate();

			observer.observe(popper.value!, {
				attributes: false,
				childList: true,
				characterData: true,
				subtree: true,
			});
		});
	}

	function stop() {
		popperInstance.value?.destroy();
		observer.disconnect();
	}

	function getModifiers(callback: (value?: unknown) => void = () => undefined) {
		const modifiers: Modifier<string, any>[] = [
			popperOffsets,
			{
				...offset,
				options: {
					offset: options.value.attached ? [0, 0] : [options.value.offsetX ?? 0, options.value.offsetY ?? 8],
				},
			},
			{
				...preventOverflow,
				options: {
					padding: 8,
				},
			},
			computeStyles,
			flip,
			eventListeners,
			{
				...arrow,
				enabled: options.value.arrow === true,
				options: {
					padding: 6,
				},
			},
			{
				name: 'minWidth',
				enabled: options.value.attached === true,
				fn: ({ state }) => {
					if (state.styles.popper) state.styles.popper.minWidth = `${state.rects.reference.width}px`;
				},
				phase: 'beforeWrite',
				requires: ['computeStyles'],
			},
			{
				name: 'applyStyles',
				enabled: true,
				phase: 'write',
				fn({ state }) {
					if (state.styles.popper) styles.value = state.styles.popper;

					if (state.styles.arrow) arrowStyles.value = state.styles.arrow;

					callback();
				},
			},
			{
				name: 'placementUpdater',
				enabled: true,
				phase: 'afterWrite',
				fn({ state }) {
					placement.value = state.placement;
				},
			},
		];

		return modifiers;
	}
}
</script>

<template>
	<div ref="v-menu" class="v-menu" v-on="trigger === 'click' ? { click: onClick } : {}">
		<div
			ref="activator"
			class="v-menu-activator"
			:class="{ attached }"
			v-on="trigger === 'hover' ? { pointerenter: onPointerEnter, pointerleave: onPointerLeave } : {}"
		>
			<slot
				name="activator"
				v-bind="{
					toggle: toggle,
					active: isActive,
					activate: activate,
					deactivate: deactivate,
				}"
			/>
		</div>

		<teleport to="#menu-outlet">
			<transition-bounce>
				<div
					v-if="isActive"
					:id="id"
					v-click-outside="{
						handler: deactivate,
						middleware: onClickOutsideMiddleware,
						disabled: closeOnClick === false,
						events: ['click'],
					}"
					class="v-menu-popper"
					:class="{ active: isActive, attached }"
					:data-placement="popperPlacement"
					:style="styles"
				>
					<div class="arrow" :class="{ active: showArrow && isActive }" :style="arrowStyles" data-popper-arrow />
					<div
						class="v-menu-content"
						:class="{ 'full-height': fullHeight, seamless }"
						v-on="{
							...(closeOnContentClick ? { click: onContentClick } : {}),
							...(trigger === 'hover' ? { pointerenter: onPointerEnter, pointerleave: onPointerLeave } : {}),
						}"
					>
						<slot
							v-bind="{
								toggle: toggle,
								active: isActive,
								activate: activate,
								deactivate: deactivate,
							}"
						/>
					</div>
				</div>
			</transition-bounce>
		</teleport>
	</div>
</template>

<style lang="scss" scoped>
.v-menu {
	display: contents;
}

.v-menu-activator {
	display: contents;
}

.v-menu-popper {
	position: fixed;
	left: -999px;
	z-index: 500;
	min-width: 100px;
	transform: translateY(2px);
	pointer-events: none;

	&.active {
		pointer-events: all;
	}
}

.arrow,
.arrow::after {
	position: absolute;
	z-index: 1;
	width: 10px;
	height: 10px;
	overflow: hidden;
	border-radius: 2px;
}

.arrow {
	&::after {
		background: var(--theme--popover--menu--background);
		transform: rotate(45deg) scale(0);
		transition: transform var(--fast) var(--transition-out);
		transition-delay: 0;
		content: '';
	}

	&.active::after {
		transform: rotate(45deg) scale(1);
		transition: transform var(--medium) var(--transition-in);
	}
}

[data-placement^='top'] .arrow {
	bottom: -6px;

	&::after {
		bottom: 3px;
	}
}

[data-placement^='bottom'] .arrow {
	top: -6px;

	&::after {
		top: 3px;
	}
}

[data-placement^='right'] .arrow {
	left: -6px;

	&::after {
		left: 4px;
	}
}

[data-placement^='left'] .arrow {
	right: -6px;

	&::after {
		right: 4px;
	}
}

.v-menu-content {
	max-height: 30vh;
	padding: 0 4px;
	overflow-x: hidden;
	overflow-y: auto;
	background-color: var(--theme--popover--menu--background);
	border: none;
	border-radius: var(--theme--popover--menu--border-radius);
	box-shadow: var(--theme--popover--menu--box-shadow);
	transition-timing-function: var(--transition-out);
	transition-duration: var(--fast);
	transition-property: opacity, transform;
	contain: content;

	.v-list {
		--v-list-background-color: transparent;
	}
}

.v-menu-content.full-height {
	max-height: none;
}

.v-menu-content.seamless {
	padding: 0;
}

[data-placement='top'] > .v-menu-content {
	transform-origin: bottom center;
}

[data-placement='top-start'] > .v-menu-content {
	transform-origin: bottom left;
}

[data-placement='top-end'] > .v-menu-content {
	transform-origin: bottom right;
}

[data-placement='right'] > .v-menu-content {
	transform-origin: center left;
}

[data-placement='right-start'] > .v-menu-content {
	transform-origin: top left;
}

[data-placement='right-end'] > .v-menu-content {
	transform-origin: bottom left;
}

[data-placement='bottom'] > .v-menu-content {
	transform-origin: top center;
}

[data-placement='bottom-start'] > .v-menu-content {
	transform-origin: top left;
}

[data-placement='bottom-end'] > .v-menu-content {
	transform-origin: top right;
}

[data-placement='left'] > .v-menu-content {
	transform-origin: center right;
}

[data-placement='left-start'] > .v-menu-content {
	transform-origin: top right;
}

[data-placement='left-end'] > .v-menu-content {
	transform-origin: bottom right;
}

.attached {
	&[data-placement^='top'] {
		> .v-menu-content {
			transform: translateY(-2px);
		}
	}

	&[data-placement^='bottom'] {
		> .v-menu-content {
			transform: translateY(2px);
		}
	}
}
</style>
