<script>
  import RecipeBannerV2 from '../lib/components/RecipeBannerV2.svelte';
  import { recommendRecipes } 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
  let recipes = []
  let tags = new Promise((res, rej) => res)
  if (onLogin) {
    recommendRecipes(userinfo.userid)
      .then((res) => {
        return res
      })
      .then(async (res) => {
        console.log(res)
        if (res.status != 'failed') {
          recipes = res.data
        } else {
          tags = []
          return
        }
        let ptags = await Promise.all(
          recipes.map(async (r) => {
            return (await getTagsOfRecipe(r.Id)).data
          }),
        )
        tags = ptags
      })
  }
</script>

{#if !onLogin}
  <NotFound />
{:else}
<div class="flex flex-col bg-base-200 pt-10 px-10 items-center" style="min-height: 85vh;">
  <div class="flex w-full justify-center">
    <h1 class="text-5xl font-bold">Recommended</h1>
  </div>
  {#await tags}
    <div class="flex justify-center text-2xl mt-3">
      Loading...
    </div>
  {:then}
    {#if recipes.length == 0}
      <div class="justify-center flex text-2xl mt-3">
        Sorry! We're unable to recommend any recipes. Add recipes to your favorites!
      </div>
    {:else}
<div class="flex flex-col justify-center p-8" style="min-height: 70vh;">
  <div class="md:grid-cols-3 grid grid-cols-1 grid-flow-row mb-4">
    {#each recipes as recipe, i}
      <RecipeBannerV2
        recipeId={recipe.Id}
        recipeLabel={recipe.Name}
        description={recipe.Description}
        prepminutes={recipe.PrepMinutes}
        tags={tags[i]}
        checkFavorite="false"
      />
    {/each}
  </div>
</div>
    {/if}
  {/await}
</div>
{/if}