<script setup lang="ts">
const { find } = useStrapi()

const { offset, search, selectedFilter } = useTableParams()

const { data: campaigns } = await useAsyncData(
  'campaigns',
  () => find<Campaign>('campaigns', {
    pagination: offset.value
  }),
  {
    transform: (data: Strapi4ResponseMany<Campaign>) => {
      pagination.value = data.meta.pagination as MetaResponsePaginationByPage
      return data.data
    },
    // ! Here I'm giving offset.value for useState global reactive var that "hosts" an object
    // ! But for simple global variables like string, I have to give the reactive part (ok)
    // ? why ?
    watch: [offset.value, search, selectedFilter] 
  })
</script>

<script setup lang="ts">
const { find } = useStrapi()

const { offset, search, selectedFilter } = useTableParams()

const { data: campaigns } = await useAsyncData(
  'campaigns',
  () => find<Campaign>('campaigns', {
    pagination: offset.value
  }),
  {
    transform: (data: Strapi4ResponseMany<Campaign>) => {
      pagination.value = data.meta.pagination as MetaResponsePaginationByPage
      return data.data
    },
    // ! Here I'm giving offset.value for useState global reactive var that "hosts" an object
    // ! But for simple global variables like string, I have to give the reactive part (ok)
    // ? why ?
    watch: [offset.value, search, selectedFilter] 
  })
</script>

export const useTableParams = () => {
  const offset = useState('offset', () => ({
    page: 1,
    pageSize: 5,
    withCount: true
  }))

  const search = useState('search', () => '')
  const selectedFilter = useState('selectedFilter', () => 'all')

  return { offset, selectedFilter, search }
}

export const useTableParams = () => {
  const offset = useState('offset', () => ({
    page: 1,
    pageSize: 5,
    withCount: true
  }))

  const search = useState('search', () => '')
  const selectedFilter = useState('selectedFilter', () => 'all')

  return { offset, selectedFilter, search }
}