<script>
  import { onMount } from 'svelte/internal';
  import { c, s } from 'services/utils';

  export let mode = 'h';
  export let basisFirst = 0.5;
  export let basisSecond = 0.5;
  export let minSize = 100;

  let divide;
  let dragging = false;
  let size = 5;
  let total = 0;

  $: classes = c({
    divide: true,
    'divide--vertical': mode === 'v',
  });

  $: classesDivider = c({
    divide__divider: true,
    'divide__divider--vertical': mode === 'v',
  });

  $: style = s({
    '--divide-size': `${size}px`,
    '--divide-basis-first': `${basisFirst * 100}%`,
    '--divide-basis-second': `${basisSecond * 100}%`,
    '--divide-min-width': minSize > 0 && mode === 'h' ? `${minSize}px` : '0',
    '--divide-min-height': minSize > 0 && mode === 'v' ? `${minSize}px` : '0',
  });

  function getTotal() {
    return mode === 'h' ? divide.clientWidth : divide.clientHeight;
  }

  function handleMousedown(event) {
    if (event.button === 0) {
      dragging = true;
      total = getTotal();
    }
  }

  function handleMousemove(event) {
    if (dragging) {
      const dragPos =
        mode === 'h' ? event.x - divide.getBoundingClientRect().x : event.y - divide.getBoundingClientRect().y;
      basisFirst = dragPos / total;
      basisSecond = 1 - basisFirst;
    }
  }

  function handleMouseup() {
    dragging = false;
  }

  function handleMouseenter(event) {
    if (event.buttons !== 1) {
      dragging = false;
    }
  }
</script>

<style>
  .divide {
    display: flex;
    flex-direction: row;
    width: 100%;
    height: 100%;
  }

  .divide__divider {
    cursor: ew-resize;
    width: var(--divide-size);
    height: 100%;
    background-color: var(--color-foreground);
  }

  .divide__divider:hover {
    background-color: var(--color-foreground-light);
  }

  .divide__elem {
    flex: 0 0 50%;
    min-width: var(--divide-min-width);
    max-width: calc(100% - var(--divide-size) - var(--divide-min-width));
    min-height: var(--divide-min-height);
    max-height: calc(100% - var(--divide-size) - var(--divide-min-height));
  }

  .divide__elem > :global(*) {
    width: 100%;
    height: 100%;
  }

  .divide__elem--first {
    flex-basis: calc(var(--divide-basis-first) - var(--divide-size) / 2);
  }

  .divide__elem--second {
    flex-basis: calc(var(--divide-basis-second) - var(--divide-size) / 2);
  }

  .divide--vertical {
    flex-direction: column;
  }

  .divide__divider--vertical {
    cursor: ns-resize;
    width: 100%;
    height: var(--divide-size);
  }
</style>

<div
  class="{classes}"
  {style}
  bind:this="{divide}"
  on:mousemove|preventDefault="{handleMousemove}"
  on:mouseup|preventDefault="{handleMouseup}"
  on:mouseenter|preventDefault="{handleMouseenter}"
>
  <div class="divide__elem divide__elem--first">
    <slot name="1"></slot>
  </div>
  <div class="{classesDivider}" draggable="true" on:mousedown|preventDefault="{handleMousedown}"></div>
  <div class="divide__elem divide__elem--second">
    <slot name="2"></slot>
  </div>
</div>
