<script setup>
import { useInfinityScroll } from '@/includes/composables/useInfinityScroll'
import MessangerModal from '@/Shared/Messanger/MessangerModal.vue'
import UserAvatar from '@/Shared/Misc/UserAvatar.vue'
import UserBanner from '@/Shared/Misc/UserBanner.vue'
import axios from 'axios'
import debounce from 'lodash/debounce'
import { ref, watch } from 'vue'

const search = ref('')
const refMessangerModal = ref()
const { domNodeFn, cursor, loading, error, callAPI, data: userLists } = useInfinityScroll(async () => {
    const url = search.value ? `user-friend/?search=${search.value}&cursor=${cursor.value}` : `user-friend/?cursor=${cursor.value}`
    const res = await axios.get(url)
    return res.data
})
callAPI()
watch(search, debounce(() => {
    callAPI()
}, 500))


function openModalMessanger(user) {
    refMessangerModal.value.openAction(user)
}
</script>
<template>
  <div v-if="userLists" class="mt-5 grid-cols-1 lg:grid-cols-2 xl:grid-cols-3 2xl:grid-cols-4 cards-block rounded-md bg-indigo-200 grid gap-2 lg:gap-4 grid-cards ">
    <messanger-modal ref="refMessangerModal" />
    <div
      v-for="user in userLists"
      :ref="el => domNodeFn(el, user.id)"
      :key="user.id"
      class="user-card relative cursor-pointer"
      @click="openModalMessanger(user)"
    >
      <div class="absolute inset-x-0 bottom-4 z-10 flex justify-center">
        <div class="flex flex-col items-center">
          <div class="flex-shrink-0">
            <user-avatar :user="user" size="small"
                         class="border border-white shadow-classic h-20 w-20  text-lg"
            />
          </div>
          <div class="mt-2 text-white text-sm text-center">
            <p class="">
              {{ user.name }}
            </p>
            <p class="text-xs">
              {{ user.username }}
            </p>
          </div>
        </div>
      </div>
      <div class="gradient-profile relative overflow-hidden">
        <user-banner class="h-72 bg-indigo-300" :user="user"
                     size="banner"
        />
      </div>
    </div>
  </div>
</template>
