<template>
  <div ref="target" class="product">
    <UDrawer
      v-if="isMobile"
      v-model:open="open"
      :class="{ animated: !isSwiping }"
      :style="{ top }"
    >
      <ProductImages />

      <template #body>
        <ProductDescription />
      </template>
    </UDrawer>

    <ProductImages v-if="!isMobile" />
    <ProductDescription v-if="!isMobile" />
  </div>
</template>

<script setup lang="ts">
import type { UseSwipeDirection } from '@vueuse/core'
import { useMediaQuery, useSwipe } from '@vueuse/core'
import { computed, shallowRef } from 'vue'

const isMobile = useMediaQuery('(max-width: 1280px)')
const open = ref(false)
const target = shallowRef<HTMLElement | null>(null)
const targetHeight = computed(() => target.value?.offsetHeight)
const top = shallowRef('0')

const { isSwiping, lengthY } = useSwipe(
  target,
  {
    passive: false,
    onSwipe(e: TouchEvent) {
      if (targetHeight.value) {
        if (lengthY.value > 200) {
          open.value = true
        }
      }
    },
    onSwipeEnd(e: TouchEvent, direction: UseSwipeDirection) {
      console.log('lengthY.value', lengthY.value)
      if (lengthY.value > 200 && targetHeight.value && (Math.abs(lengthY.value) / targetHeight.value) >= 0.5) {
        open.value = true
      }
    },
  },
)
</script>

<style scoped lang="scss">
@use '~/assets/scss/utils' as *;

.product {
  width: 100%;
  display: flex;
  flex-direction: row;

  @media (max-width: 768px) {
    flex-direction: column;
    align-items: center;
  }
}
</style>
