<template>
  <div class="flexContainer flexColumn">
    <div
      :style="{ cursor, userSelect }"
      class="flexItems flexRow"
      @mouseup="onMouseUp"
      @mousemove="onMouseMove"
    >
      <div
        class="split-box split-boxA vertical"
        :class="[{ bordered: !Acontainer }, { noChild: !Acontainer }]"
        :style="setWidthA"
      >
        <slot name="boxA">
          A
        </slot>
      </div>
      <div
        class="split-box-resizer vertical"
        :style="resizeType"
        @mousedown="onMouseDown"
        @dblclick="ondblClick"
      />
      <div
        class="split-box split-boxB vertical"
        :class="[{ bordered: !Bcontainer }, { noChild: !Bcontainer }]"
        :style="setWidthB"
      >
        <slot name="boxB">
          B
        </slot>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    minA: {
      type: Number,
      default: 0,
    },
    minB: {
      type: Number,
      default: 0,
    },
    defaultPercent: {
      type: Number,
      default: 50,
    },
    Acontainer: Boolean,
    Bcontainer: Boolean,
  },
  data() {
    return {
      active: false,
      hasMoved: false,
      percent: this.defaultPercent,
    };
  },
  computed: {
    userSelect() {
      return this.active ? 'none' : '';
    },
    cursor() {
      return this.active ? 'col-resize' : '';
    },
    resizeType() {
      return `left: ${this.percent}%`;
    },
    setWidthA() {
      return this.percent < 2 ? 'display: none' : `width: ${this.percent}%`;
    },
    setWidthB() {
      return this.percent > 98
        ? 'display: none'
        : `width: ${100 - this.percent}%`;
    },
  },
  watch: {
    defaultPercent(newValue, oldValue) {
      this.percent = newValue;
    },
  },
  methods: {
    ondblClick() {
      if (!this.hasMoved) {
        this.percent = this._props.defaultPercent;
      }
    },
    onMouseDown(e) {
      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.offsetLeft;
          target = target.offsetParent;
        }
        const currentPage = e.pageX;
        const targetOffset = e.currentTarget.offsetWidth;
        const percent = Math.floor(((currentPage - offset) / targetOffset) * 10000) / 100;
        if (percent >= this._props.minA && percent <= 100 - this._props.minB) {
          this.percent = percent;
        }
        this.hasMoved = true;
      }
    },
  },
};
</script>

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

.split-box.vertical.split-boxA {
  position: relative;
  left: 0;
  z-index: 13;
}
.split-box.vertical.split-boxB {
  position: relative;
  right: 0;
  z-index: 13;
}

.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.vertical {
  width: 0.75rem;
  border-left: 5px solid rgba(255, 255, 255, 0);
  border-right: 5px solid rgba(255, 255, 255, 0);
  cursor: col-resize;
}
@media screen and (max-width: 768px) {
  .split-box {
    width: 100% !important;
  }
}
</style>
