<script setup lang="ts">
import { useIntersectionObserver } from '@vueuse/core';
import { ref } from 'vue';

const loading = ref(false);
const list = ref<string[]>([]);
const loadMore = async () => {
  loading.value = true;
  await new Promise((resolve) => setTimeout(resolve, 1000));
  const items = Array.from({ length: 5 }, (_, i) => `Item ${list.value.length + i + 1}`);
  list.value.push(...items);
  loading.value = false;
};

const target = ref(null);
const isVisible = ref(false);

const { isActive, pause, resume, isSupported } = useIntersectionObserver([target], ([entry]) => {
  isVisible.value = entry?.isIntersecting || false;
});
</script>

<template>
  <Card v-for="item in list" :key="item" class="mb-[16px]">
    <template #title>{{ item }}</template>
  </Card>

  <div ref="target" class="border-[8px] border-blue-500 p-[16px] bg-white dark:bg-gray-800 dark:border-gray-700">
    <Button label="Load more" :loading="loading" fluid @click="loadMore" />
  </div>

  <ScrollTop />
  <div
    class="border-[1px] border-blue-500 fixed top-16 right-16 p-[4px] bg-white dark:bg-gray-800 dark:border-gray-700"
    flex="~ col"
    items-end
  >
    <label class="checkbox">
      <span mr="[8px]">isSupported: {{ isSupported }}</span>
      <input
        :checked="isActive"
        type="checkbox"
        name="enabled"
        @input="($event.target as HTMLInputElement)!.checked ? resume() : pause()"
      />
      <span>Enable</span>
    </label>
    <div>
      Element
      <span class="font-bold" :class="isVisible ? 'text-blue-500' : 'text-orange-400 dark:text-orange-300'">
        {{ isVisible ? 'inside' : 'outside' }}
      </span>
      the viewport
    </div>
  </div>
</template>
