import { Pos } from '@/sdk'
import { appEl } from '@/store'
import { computed, Ref } from 'vue'

export const collision = (
  $app: HTMLElement,
  $target: HTMLElement,
  pos: Pos,
  dire: Dire,
  $boxs: HTMLElement[]
) => {
  const appBound = $app.getBoundingClientRect()
  const left = $boxs[0] ? $boxs[0].getBoundingClientRect().right : appBound.left
  const right = $boxs[1]
    ? $boxs[1].getBoundingClientRect().left
    : appBound.width
  const bound = [left, appBound.top, right, appBound.bottom]
  const width = $target.offsetWidth
  const height = $target.offsetHeight

  const getX = (dire: 'left' | 'right') =>
    dire === 'left'
      ? pos.x - width < bound[0]
        ? bound[0] + width
        : pos.x > bound[2]
        ? bound[2]
        : pos.x
      : pos.x < bound[0]
      ? bound[0]
      : pos.x + width > bound[2]
      ? bound[2] - width
      : pos.x

  const getY = (dire: 'top' | 'bottom') =>
    dire === 'top'
      ? pos.y - height < bound[1]
        ? bound[1] + height
        : pos.y > bound[3]
        ? bound[3]
        : pos.y
      : pos.y < bound[1]
      ? bound[1]
      : pos.y + height > bound[3]
      ? bound[3] - height
      : pos.y

  const dires = dire.split('-') as any

  return {
    x: getX(dires[0]),
    y: getY(dires[1])
  }
}

export const useCollision = (
  vmRef: Ref<HTMLElement>,
  pos: Ref<Pos>,
  dire: Dire = 'right-bottom'
) => {
  const $box = appEl.value.querySelector('.ui-editor-toolbox') as HTMLElement
  const $menu = appEl.value.querySelector('.ui-editor-menu') as HTMLElement
  const { x, y } = collision(appEl.value as any, vmRef.value, pos.value, dire, [
    $menu,
    $box
  ])
  return {
    left: x + 'px',
    top: y + 'px'
  }
}

type Dire = 'right-bottom' | 'left-bottom' | 'left-top' | 'right-top'

export const useCollisionComputed = (
  vmRef: Ref<HTMLElement>,
  pos: Ref<Pos>,
  dire: Dire = 'right-bottom'
) => {
  return computed(() => {
    if (vmRef.value && pos.value) {
      return useCollision(vmRef, pos, dire)
    }
  })
}