<script lang="ts">
  import VirtualInfiniteList from 'svelte-virtual-infinite-list'
  import type { InfiniteEvent } from 'svelte-virtual-infinite-list'
  import { find } from './find'

  let things = [
    // these can be any values you like
    { name: 'one', number: 1 },
    { name: 'two', number: 2 },
    { name: 'three', number: 3 },
    // ...
    { name: 'six thousand and ninety-two', number: 6092 }
  ]

  let loading = true
  let virtualInfiniteList: VirtualInfiniteList

  async function onInitialize() {
    await virtualInfiniteList.scrollToBottom()
  }

  async function onInfinite({ detail }: InfiniteEvent) {
    if (detail.on === 'bottom') return
    loading = true

    const data = await find(30)
    things = [...data, ...things]

    loading = false
  }

  onMount(async () => {
    const data = await find(30)
    things = [...data]
    loading = false
  })

  async function scrollToIndex(item) {
    const index = things.findIndex((it) => it === item.number)
    index && await virtualInfiniteList.scrollToIndex(index)
  }
</script>

<VirtualInfiniteList
  items={things}
  {loading}
  direction="top"
  persists={30}
  uniqueKey={'number'}
  on:initialize={onInitialize}
  on:infinite={onInfinite}
  bind:this={virtualInfiniteList}
  let:item
>
  <!-- this will be rendered for each currently visible item -->
  <div slot="item">
    <p>{item.number}: {item.name}</p>
  </div>

  <!-- option -->
  <div slot="loader">
    Loading...
  </div>

  <!-- option -->
  <div slot="empty">
    Empty
  </div>
</VirtualInfiniteList>