<script setup lang="ts">
import { computed } from "vue";
import { useOriginGesture } from "../gesture";
import type { OriginGestureProps } from "../types";

defineOptions({ name: "OriginGesture", inheritAttrs: false });

const props = withDefaults(defineProps<OriginGestureProps>(), {
  as: "div",
});

/*
 * This convenience component makes the declaration live exactly where the
 * developer writes it. `useOriginGesture()` is also public for components that
 * cannot accept an extra wrapper element.
 */
const gesture = useOriginGesture(
  props.gesture ?? {
    direction: props.direction,
    edge: props.edge,
    threshold: props.threshold,
    action: (context) => props.action?.(context),
  },
);
const touchStyle = computed(() => gesture.style);
</script>

<template>
  <component
    :is="as"
    v-bind="$attrs"
    class="nvo-gesture"
    :style="touchStyle"
    @pointerdown="gesture.onPointerdown"
    @pointermove="gesture.onPointermove"
    @pointerup="gesture.onPointerup"
    @pointercancel="gesture.onPointercancel"
  >
    <slot />
  </component>
</template>
