<!-- Adapted from https://phuoc.ng/collection/html-dom/order-resizable-split-views/ -->

<template>
  <div class="container">
    <div class="top">
      <slot name="top"/>
    </div>
    <div class="resizer" :data-direction="horizontal?'horizontal':'vertical'" ref="resizerElement"></div>
    <div class="scrollpane">
      <slot name="bottom"/>
    </div>
  </div>
</template>

<script setup>

import {onMounted, ref} from "vue";

const resizerElement = ref()
const props = defineProps(['horizontal'])

function resizable() {
  const resizer = resizerElement.value
  const direction = resizer.getAttribute('data-direction') || 'horizontal';
  const prevSibling = resizer.previousElementSibling;
  const nextSibling = resizer.nextElementSibling;

  // The current position of mouse
  let x = 0;
  let y = 0;
  let prevSiblingHeight = 0;
  let prevSiblingWidth = 0;

  // Handle the mousedown event
  // that's triggered when user drags the resizer
  const mouseDownHandler = function (e) {
    // Get the current mouse position
    x = e.clientX;
    y = e.clientY;
    const rect = prevSibling.getBoundingClientRect();
    prevSiblingHeight = rect.height;
    prevSiblingWidth = rect.width;

    // Attach the listeners to document
    document.addEventListener('mousemove', mouseMoveHandler);
    document.addEventListener('mouseup', mouseUpHandler);
  };

  const mouseMoveHandler = function (e) {
    // How far the mouse has been moved
    const dx = e.clientX - x;
    const dy = e.clientY - y;

    switch (direction) {
      case 'vertical':
        const h =
            ((prevSiblingHeight + dy) * 100) /
            resizer.parentNode.getBoundingClientRect().height;
        prevSibling.style.height = h + '%';
        break;
      case 'horizontal':
      default:
        const w =
            ((prevSiblingWidth + dx) * 100) / resizer.parentNode.getBoundingClientRect().width;
        prevSibling.style.width = w + '%';
        break;
    }

    const cursor = direction === 'horizontal' ? 'col-resize' : 'row-resize';
    resizer.style.cursor = cursor;
    document.body.style.cursor = cursor;

    prevSibling.style.userSelect = 'none';
    prevSibling.style.pointerEvents = 'none';

    nextSibling.style.userSelect = 'none';
    nextSibling.style.pointerEvents = 'none';
  };

  const mouseUpHandler = function () {
    resizer.style.removeProperty('cursor');
    document.body.style.removeProperty('cursor');

    prevSibling.style.removeProperty('user-select');
    prevSibling.style.removeProperty('pointer-events');

    nextSibling.style.removeProperty('user-select');
    nextSibling.style.removeProperty('pointer-events');

    // Remove the handlers of mousemove and mouseup
    document.removeEventListener('mousemove', mouseMoveHandler);
    document.removeEventListener('mouseup', mouseUpHandler);
  };

  // Attach the handler
  resizer.addEventListener('mousedown', mouseDownHandler);
};

onMounted(resizable)

</script>


<style scoped lang="scss">
@use 'src/styles/vars' as *;

body {
  height: 100vh;
  width: 100vw;
}

.container {
  display: flex;
  flex: 1;

  align-items: center;
  flex-direction: column;
  justify-content: center;
  width: 100%;
}

// todo light/dark mode
.resizer[data-direction='horizontal'] {
  background-color: #444;
  cursor: ew-resize;
  height: 100%;
  width: 2px;
}

.resizer[data-direction='vertical'] {
  background-color: #444;
  cursor: ns-resize;
  height: 4px;
  width: 100%;
}

.top {
  height: 60%;
  width: 100%;
  min-height: 5em;
}

.scrollpane {
  flex: 1;
  width: 100%;
  min-height: 5em;
  max-height: 100%;
  overflow-y: hidden;
}
</style>