import { ref } from 'vue'

export function useTouch() {
  const direction = ref<string>('')
  const deltaX = ref<number>(0)
  const deltaY = ref<number>(0)
  const offsetX = ref<number>(0)
  const offsetY = ref<number>(0)
  const startX = ref<number>(0)
  const startY = ref<number>(0)

  function touchStart(event) {
    const touch = event.touches[0]
    direction.value = ''
    deltaX.value = 0
    deltaY.value = 0
    offsetX.value = 0
    offsetY.value = 0
    startX.value = touch.clientX
    startY.value = touch.clientY
  }

  function touchMove(event) {
    const touch = event.touches[0]
    deltaX.value = touch.clientX - startX.value
    deltaY.value = touch.clientY - startY.value
    offsetX.value = Math.abs(deltaX.value)
    offsetY.value = Math.abs(deltaY.value)
    direction.value = offsetX.value > offsetY.value ? 'horizontal' : offsetX.value < offsetY.value ? 'vertical' : ''
  }

  return {
    touchStart,
    touchMove,
    direction,
    deltaX,
    deltaY,
    offsetX,
    offsetY,
    startX,
    startY
  }
}