<script>
  import PaginationWrapper from '../lib/components/PaginationWrapper.svelte';
  import { getWeeklyTopRecipes } from '../lib/utils/recipes.js'
  import { getTagsOfRecipe } from '../lib/utils/tags.js'

  let page = 1;

  async function fetchData() {
    let recipes = []
    let tags = []

    await getWeeklyTopRecipes()
      .then((res) => {
        if (res.status == 'success') {
          return res.data
        } else {
          return []
        }
      })
      .then(async (data) => {
        recipes = data
        let ptags = await Promise.all(
          data.map(async (r) => {
            return (await getTagsOfRecipe(r.Id)).data
          }),
        )
        tags = ptags
      })
    return { recipes: recipes, tags: tags }
  }

  let pageData = fetchData()
</script>

<div class="flex flex-col bg-base-200 pt-10 px-10" style="min-height: 85vh">
  <div class="flex w-full justify-center text-5xl font-bold">
    Top Weekly Recipes
  </div>
  {#await pageData}
    <div class="flex justify-center text-2xl mt-3">
      Loading...
    </div>
  {:then data}
    {#if data.recipes.length != 0}
        <PaginationWrapper
          recipes={data.recipes}
          tags={data.tags}
          totalPages={Math.ceil(data.recipes.length / 6)}
          page={page}
        />
    {:else}
      <div class="justify-center flex text-2xl mt-3">
        Sorry! Unfortunately we have insufficient data! Come back later!
      </div>
    {/if}
  {/await}
</div>