<template>
  <div class="flexContainer flexColumn">
    <div
      :style="{ cursor, userSelect }"
      class="flexItems flexColumn"
      @mouseup="onMouseUp"
      @mousemove="onMouseMove"
    >
      <div
        :id="'a-' + this._uid"
        class="split-box split-boxA horizontal"
        :class="[{ bordered: !Acontainer }, { noChild: !Acontainer }]"
        :style="setHeightA"
      >
        <slot name="boxA">
          A
        </slot>
      </div>
      <div
        :id="'s-' + this._uid"
        class="split-box-resizer horizontal"
        @mousedown="onMouseDown"
        @dblclick="ondblClick"
      />
      <div
        :id="'b-' + this._uid"
        class="split-box split-boxB horizontal"
        :class="[{ bordered: !Bcontainer }, { noChild: !Bcontainer }]"
        :style="setHeightB"
      >
        <slot name="boxB">
          B
        </slot>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    minA: {
      type: Number,
      default: 0,
    },
    minB: {
      type: Number,
      default: 0,
    },
    Acontainer: Boolean,
    Bcontainer: Boolean,
  },
  data() {
    return {
      active: false,
      hasMoved: false,
      heightA: -1,
      heightB: -1,
      initA: 0,
      initB: 0,
      initS: 0,
      onceCheck: false,
    };
  },
  computed: {
    userSelect() {
      return this.active ? 'none' : '';
    },
    cursor() {
      return this.active ? 'row-resize' : '';
    },
    setHeightA() {
      if (this.heightA < 5) {
        if (this.heightA < 0) {
          return 'height: fit-content';
        }
        return 'display: none';
      }
      return `height: ${this.heightA}px`;
    },
    setHeightB() {
      if (this.heightB < 5) {
        if (this.heightB < 0) {
          return 'height: fit-content';
        }
        return 'display: none';
      }
      return `height: ${this.heightB}px`;
    },
  },
  methods: {
    ondblClick() {
      if (!this.hasMoved) {
        this.heightA = -1;
        this.heightB = -1;
      }
    },
    onMouseDown(e) {
      if (!this.onceCheck) {
        this.initA = document.getElementById(`a-${this._uid}`).offsetHeight;
        this.initB = document.getElementById(`b-${this._uid}`).offsetHeight;
        this.initS = document.getElementById(`s-${this._uid}`).offsetHeight;
        this.onceCheck = true;
      }
      if (e.buttons === 1) {
        this.active = true;
        this.hasMoved = false;
      }
    },
    onMouseUp() {
      this.active = false;
    },
    onMouseMove(e) {
      if (e.buttons === 0 || e.which === 0) {
        this.active = false;
      }
      if (this.active) {
        let offset = 0;
        let target = e.currentTarget;
        while (target) {
          offset += target.offsetTop;
          target = target.offsetParent;
        }
        const currentPage = e.pageY;
        const total = this.initA + this.initB + this.initS;
        const valA = currentPage - offset;
        const valB = total - currentPage + offset - this.initS;
        if (
          valA <= total - this.initS
          && valA >= this._props.minA
          && valB >= this._props.minB
        ) {
          this.heightA = valA;
          this.heightB = valB;
        }
        this.hasMoved = true;
      }
    },
  },
};
</script>

<style scoped>
.split-box.noChild {
  background-clip: content-box;
  background-color: white;
}

.split-box.horizontal.split-boxA {
  position: relative;
}
.split-box.horizontal.split-boxB {
  position: relative;
  overflow: hidden;
}

.split-box-resizer {
  background: #000;
  opacity: 0.3;
  z-index: 15;
  -moz-background-clip: padding;
  -webkit-background-clip: padding;
  background-clip: padding-box;
}
.split-box-resizer.horizontal {
  height: 0.75rem;
  border-top: 5px solid rgba(255, 255, 255, 0);
  border-bottom: 5px solid rgba(255, 255, 255, 0);
  cursor: row-resize;
}
@media screen and (max-width: 768px) {
  .split-box {
    width: 100% !important;
  }
}
</style>
