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

  let userinfo = getUserInfo()
  let onLogin = userinfo == null ? false : true
  async function fetchData() {
    let recipes = []
    let tags = []

    if (onLogin) {
      let res = await getUserAuthoredRecipes(userinfo.userid)
      if (res.status != 'failed') {
        recipes = res.data
      } else {
        tags = []
      }
      let ptags = await Promise.all(
        recipes.map(async (r) => {
          return (await getTagsOfRecipe(r.Id)).data
        }),
      )
      tags = ptags
    }

    return { recipes: recipes, tags: tags }
  }

  let pageData = fetchData()
  let page = 1
</script>

{#if !onLogin}
  <NotFound />
{:else}
<div class="flex flex-col w-full bg-base-200 pt-10 px-10" style="min-height: 85vh;">
  <div class="flex justify-center">
    <h1 class="text-5xl font-bold">Your Recipes</h1>
  </div>
  {#await pageData}
    <div class="flex justify-center text-2xl mt-3">
      Loading...
    </div>
  {:then data}
    {#if data.recipes.length == 0}
      <div class="justify-center flex text-2xl mt-3">
        So empty! Write your recipes!
      </div>
    {:else}
      <PaginationWrapper
        recipes={data.recipes}
        tags={data.tags}
        totalPages={Math.ceil(data.recipes.length / 6)}
        page={page}
      />
    {/if}
  {/await}
</div>
{/if}