<script setup lang="ts">
import { ref } from 'vue'

const props = withDefaults(defineProps<{
  initialLeftWidth?: number
  minLeftPercent?: number
  maxLeftPercent?: number
}>(), {
  initialLeftWidth: 30,
  minLeftPercent: 15,
  maxLeftPercent: 75
})

const leftWidthPercent = ref(props.initialLeftWidth)
const isDragging = ref(false)

const startDrag = () => {
  isDragging.value = true
  window.addEventListener('mousemove', onDrag)
  window.addEventListener('mouseup', stopDrag)
}

const onDrag = (e: MouseEvent) => {
  if (!isDragging.value) return
  const containerWidth = window.innerWidth
  const newPercent = (e.clientX / containerWidth) * 100
  if (newPercent > props.minLeftPercent && newPercent < props.maxLeftPercent) {
    leftWidthPercent.value = newPercent
  }
}

const stopDrag = () => {
  isDragging.value = false
  window.removeEventListener('mousemove', onDrag)
  window.removeEventListener('mouseup', stopDrag)
}
</script>

<template>
  <div style="display: flex; height: 100%; width: 100%; position: relative; overflow: hidden; user-select: none;">
    <!-- Left Slot Container -->
    <div :style="{ width: leftWidthPercent + '%' }" style="overflow: hidden; display: flex; flex-direction: column;">
      <slot name="left" :left-width="leftWidthPercent" />
    </div>

    <!-- Drag Handle Bar -->
    <div
      style="width: 8px; background: #CBD5E1; cursor: col-resize; display: flex; align-items: center; justify-content: center; z-index: 10; flex-shrink: 0;"
      title="드래그하여 분할 비율 조절"
      @mousedown="startDrag">
      <div style="width: 2px; height: 24px; background: #7F8C8D;"></div>
    </div>

    <!-- Right Slot Container -->
    <div :style="{ width: (100 - leftWidthPercent) + '%' }" style="overflow: hidden; display: flex; flex-direction: column;">
      <slot name="right" :right-width="100 - leftWidthPercent" />
    </div>
  </div>
</template>
