<template>
  <div>
    <div :id="getID" :class="className"></div>
  </div>
</template>
<script>
const inRange = (from, to, value) => {
  return value < from ? from : value > to ? to : value
}

export default {
  name: 'VueJsModalResizer',
  props: {
    minHeight: {
      type: Number,
      default: 0
    },
    minWidth: {
      type: Number,
      default: 0
    },
    maxWidth: {
      type: Number,
      default: Number.MAX_SAFE_INTEGER
    },
    maxHeight: {
      type: Number,
      default: Number.MAX_SAFE_INTEGER
    },
    viewportWidth: {
      type: Number,
      required: true
    },
    viewportHeight: {
      type: Number,
      required: true
    }
  },
  data() {
    return {
      clicked: false,
      targetClass: '',
      size: {},
      initialX: 0,
      initialY: 0
    }
  },
  mounted() {
    this.$el.addEventListener('mousedown', this.start, false)
  },
  computed: {
    className() {
      const { clicked } = this
      return ['xx-dialog__resizer', { clicked }]
    },
    getID() {
      if (this.resizeIndicator) return 'xx-dialog-resizer'
      else return ''
    }
  },
  methods: {
    start(event) {
      this.targetClass = event.target.className
      this.clicked = true
      this.initialX = event.clientX
      this.initialY = event.clientY

      window.addEventListener('mousemove', this.mousemove, false)
      window.addEventListener('mouseup', this.stop, false)

      event.stopPropagation()
      event.preventDefault()
    },

    stop() {
      this.clicked = false
      this.clicked = false
      this.targetClass = ''
      this.initialX = 0
      this.initialY = 0

      window.removeEventListener('mousemove', this.mousemove, false)
      window.removeEventListener('mouseup', this.stop, false)

      this.$emit('resize-stop', {
        element: this.$el.parentElement,
        size: this.size
      })
    },

    mousemove(event) {
      this.resize(event)
    },
    resize(event) {
      var el = this.$el.parentElement

      var width = event.clientX
      var height = event.clientY
      var styleWidth = parseInt(el.style.width.replace('px', ''))
      var styleHeight = parseInt(el.style.height.replace('px', ''))

      //Block Resize if mouse outside visable space.
      if (event.clientX > this.viewportWidth || event.clientX < 0) return
      if (event.clientY > this.viewportHeight || event.clientY < 0) return

      //Calcualte new  Widht/Height based on direction
      if (el) {

        width = width - el.offsetLeft
        height = height - el.offsetTop

        const maxWidth = Math.min(this.windowWidthWithoutScrollbar(), this.maxWidth)
        const maxHeight = Math.min(window.innerHeight, this.maxHeight)
        width = inRange(this.minWidth, maxWidth, width)
        height = inRange(this.minHeight, maxHeight, height)
        this.initialX = event.clientX
        this.initialY = event.clientY

        this.size = { width, height }

        //Calculate growth in each dimension to be used when shifting the modal.
        const dimGrowth = {
          width: width - styleWidth,
          height: height - styleHeight
        }

        el.style.width = width + 'px'
        el.style.height = height + 'px'
        this.$emit('resize', {
          element: el,
          size: this.size,
          direction: this.targetClass,
          dimGrowth: dimGrowth
        })
      }
    },

    windowWidthWithoutScrollbar() {
      const { innerWidth } = window
      const { clientWidth } = document.documentElement

      if (innerWidth && clientWidth) {
        return Math.min(innerWidth, clientWidth)
      }

      return clientWidth || innerWidth
    }
  }
}
</script>
