<script lang="ts" setup>
import { computed, onMounted, onUnmounted, provide, ref } from 'vue'
import { RESIZABLE_KEY, useResizableLayoutProvider } from '../../composables/useResizableLayout'

interface Props {
	/** Lay panels side-by-side. Default: vertical (stacked). */
	horizontal?: boolean
	/**
	 * Stack panels vertically when the container is narrower than `breakpoint`.
	 * Only applies when `horizontal` is set. Default: true.
	 * Set `:breakpoint="0"` to disable responsive switching entirely.
	 */
	mobileVertical?: boolean
	/** Width (px) below which the mobile layout activates. @default 768 */
	breakpoint?: number
}

const props = withDefaults(defineProps<Props>(), {
	horizontal: false,
	mobileVertical: true,
	breakpoint: 768,
})

const containerEl = ref<HTMLElement>()
const directionProp = computed(() => props.horizontal ? 'horizontal' as const : 'vertical' as const)
const mobileDirection = computed(() => props.mobileVertical || !props.horizontal ? 'vertical' as const : 'horizontal' as const,
)

const { context, observe, disconnect } = useResizableLayoutProvider({
	directionProp,
	mobileDirection: mobileDirection.value,
	breakpoint: props.breakpoint,
	containerEl,
})

provide(RESIZABLE_KEY, context)
onMounted(observe)
onUnmounted(disconnect)

const isHorizontal = computed(() => context.direction.value === 'horizontal')
</script>

<template>
	<div ref="containerEl" class="resizable" :class="isHorizontal ? 'resizable--row' : 'resizable--col'">
		<slot />
	</div>
</template>

<style scoped>
.resizable {
	display: flex;
	width: 100%;
	height: 100%;
	overflow: hidden;
}

.resizable--row {
	flex-direction: row;
}

.resizable--col {
	flex-direction: column;
}
</style>
