<script setup lang="ts">
import type { IconType, ThemeType } from '@bagelink/vue'
import type { TriggerEvent } from 'floating-vue'
import type { ComponentExposed } from 'vue-component-type-helpers'
import { Btn, useDevice } from '@bagelink/vue'
import { Dropdown as DDown } from 'floating-vue'

export type Side = 'top' | 'right' | 'bottom' | 'left' | 'auto'
export type Alignment = 'start' | 'end'
export type AlignedPlacement = 'auto' | `${Side}-${Alignment}`

const {
	value,
	thin,
	flat,
	disabled,
	icon,
	triggerClass,
	iconEnd,
	outline,
	round,
	placement = 'bottom-start',
	disablePlacement = false,
	noAutoFocus,
	autoHide = true,
	triggers = ['click'],

} = defineProps<{
	value?: string
	thin?: boolean
	flat?: boolean
	disabled?: boolean
	icon?: IconType
	color?: ThemeType
	triggerClass?: string
	iconEnd?: IconType
	border?: boolean
	outline?: boolean
	round?: boolean
	placement?: AlignedPlacement
	disablePlacement?: boolean
	noAutoFocus?: boolean
	autoHide?: boolean
	triggers?: TriggerEvent[]
	// theme
	// referenceNode
	// shown
	// showGroup
	// ariaId
	// disabled
	// placement
	// delay
	// distance
	// skidding
	// showTriggers
	// hideTriggers
	// popperTriggers
	// popperShowTriggers
	// popperHideTriggers
	// container
	// boundary
	// strategy
	// handleResize
	// instantMove
	// eagerMount
	// popperClass
	// computeTransformOrigin
	// autoMinSize
	// autoSize
	// autoMaxSize
	// autoBoundaryMaxSize
	// preventOverflow
	// overflowPadding
}>()

const emit = defineEmits(['show', 'hide'])

const ddownRef = $ref<ComponentExposed<typeof DDown>>()
const triggerRef = $ref<HTMLElement>()
const shown = defineModel('shown', {
	type: Boolean,
	default: false,
})

const show = () => ddownRef?.show()
function hide() {
	// Return focus to trigger element before hiding
	triggerRef?.focus()
	ddownRef?.hide()
}

const { isMobile } = useDevice()

const shouldDisablePositioning = $computed(() => {
	return disablePlacement && isMobile
})

defineExpose({ show, hide, shown })
</script>

<template>
	<DDown
		ref="ddownRef"
		v-model:shown="shown"
		:disabled
		:noAutoFocus
		:positioning-disabled="shouldDisablePositioning"
		:placement
		:autoHide
		:triggers
		@hide="emit('hide')"
		@show="emit('show')"
	>
		<div ref="triggerRef" />
		<slot
			name="trigger"
			:show
			:hide
		>
			<Btn
				:class="triggerClass"
				:iconEnd
				:icon
				:value
				:thin
				:flat
				:outline
				:round
				:color
			/>
		</slot>
		<template #popper="{ hide, show }">
			<slot
				:hide
				:show
			/>
		</template>
	</DDown>
</template>

<style>
.v-popper__popper--no-positioning {
	position: fixed;
	z-index: 9999;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	display: flex;
	align-items: flex-end;
}

.v-popper__popper--no-positioning .v-popper__backdrop {
	display: block;
	background: rgba(0 0 0 / 90%);
}

.v-popper__popper--no-positioning .v-popper__wrapper {
	width: 100%;
	pointer-events: auto;
	transition: transform .15s ease-out;
}

.v-popper__popper--no-positioning.v-popper__popper--hidden .v-popper__wrapper {
	transform: translateY(100%);
}
</style>
