<script setup>
import { ref } from "vue";
import { VCard } from "vuetify/components/VCard";
const isResizing = ref(false);
const pane1Width = ref("50%");
const containerRef = ref();
const props = defineProps({
  height: { type: [Number, String], required: false }
});
const startResize = () => {
  isResizing.value = true;
};
const stopResize = () => {
  isResizing.value = false;
};
const resize = (event) => {
  if (isResizing.value && containerRef.value) {
    const containerRect = containerRef.value.getBoundingClientRect();
    const newWidth = event.clientX - containerRect.left;
    pane1Width.value = `${newWidth / containerRect.width * 100}%`;
  }
};
</script>

<template>
  <v-card :="$attrs">
    <v-sheet
      border
      :height="props.height"
    >
      <div
        ref="containerRef"
        class="d-flex"
        @mouseup="stopResize"
        @mousemove="resize"
      >
        <v-sheet :width="pane1Width">
          <slot name="left" />
        </v-sheet>
        <v-divider
          :thickness="3"
          vertical
          class="cursor-move"
          @mousedown="startResize"
        />
        <v-sheet :width="`calc(100% - ${pane1Width})`">
          <slot name="right" />
        </v-sheet>
      </div>
    </v-sheet>
  </v-card>
</template>
