<script lang="ts">
  import PostComponent from "./lib/PostComponent.svelte";
  import GuestbookPostComponent from "./lib/GuestbookPostComponent.svelte";
  import AccountComponent from "./lib/AccountComponent.svelte";
  import InfiniteLoading from "svelte-infinite-loading";
  import { getNextPosts, Post, getAllMetadataFromPds, fetchGuestbookPosts } from "./lib/pdsfetch";
  import { Config } from "../config";
  const accountsPromise = getAllMetadataFromPds();
  import { onMount } from "svelte";

  let posts: Post[] = [];
	let guestbookPosts: Post[] = [];

  let clickCounter = 0;
  const birdbrain = async () => {
    clickCounter++;
    if (clickCounter >= 10) {
      clickCounter = 0;
			document.getElementById('birdbrain').showPopover();
    }
  };

  onMount(() => {
    // Fetch initial posts
    getNextPosts().then((initialPosts) => {
      posts = initialPosts;
    });
		fetchGuestbookPosts().then((gbPosts) => {
			console.log(gbPosts);
			guestbookPosts = gbPosts;
		});
  });
  // Infinite loading function
  const onInfinite = ({
    detail: { loaded, complete },
  }: {
    detail: { loaded: () => void; complete: () => void };
  }) => {
    getNextPosts().then((newPosts) => {
      console.log("Loading next posts...");
      if (newPosts.length > 0) {
        posts = [...posts, ...newPosts];
        loaded();
      } else {
        complete();
      }
    });
  };
</script>

<main>
  <div id="content">
    {#await accountsPromise}
			<div id="loadingbirds">
			<div class="small">
<pre>
                              █▓░░░░░░░░░▒        
                            █▓▒           ░▒      
                         ▓▒▒▒░              ▒     
                       ▓▒░░░░                ░▓   
                     █▒  ░░     ░   ░   ▓▒    ░█  
                   ▓░    ░░     ▒▓░░▒▒░        ▒  
███████      ██▓▒░▒▒░   ░░░░       ░░░          ▒ 
█▓▓▓▓▓▓▓▓▓▓▓▓▓▒▓▓▓▓▓▒▒▓▒▒▒▓░                     ▓
        ███▓▒░░▒░░░░▓▓█▓▓▒░                      ░
                ▓                                ░
                █              ░                 ▒
                █░                              ▒█
                 ▒                             ▒  
                 █▒                           █   
                   ▓                        ░█    
                    ▓▒    ░░              ░▒      
                      ▓▒▒░░▒▓░  ░░░▒▒▓▓▒▓▓        
                          █▓█▓▓█    ███▓█         
                           ████      ████         
</pre>
			</div>
			<div class="large">
<pre>
                                                                 ████▓▒░░░░░░░▒▓██                   
                                                              █▓░                 ▒█                
                                                           ██▓░                     ▒█              
                                                         ██▒                          ▒█            
                                                     ███▓▒░                             ▓█          
                                                   █▓░   ░                               █          
                                                ██░     ░                                 ░█        
                                               █░                                           ▓       
                                             █▒                                              ▓      
                                          ██▒                                   ▒▓▓           █     
                                        █▒                       ▓█     ░▒       ▒▓           ▓█    
                                     ██▒                         ▒▓░   ░▒░░                    ▓█   
                                 ███▒░                                ░▒▒▒▒▒░                   ▓█  
 █████                       ██▓░    ░░░░                                                        █  
█▓▒░░░░░░▒▒▒▓▓██████████▓▓▒░   ░▒▒▒▒▒▒▓▒▒░         ░▒▒░                                          ░█ 
   ██████▓▓▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒░▒▒▒▒▓▒▒▓▓▓▓▒▒▒▒▒▒▓▒░░░▒▒▒░                                           ▒█
              ███▓▓▒▒░░░░       ░░░▒▓▓▓▒▒▓▓▓▓▓▒░░▒▒▒▒░                                             █
                         ███▓▓▒         ▒▓▓▓▓▓▓▓█▓▒░░                                              █
                               █▓           ░▒▒▓▒░                                                 ▓
                                █▓                                                                 ▓
                                 █                                                                 █
                                 █                                                                ░█
                                 █                                                                ▓█
                                 █░                                                              ▒█ 
                                  ▒                                                             ▓█  
                                  ▓                                                            █    
                                  █▒                                                         ▒█     
                                   █▒                                                       ▒█      
                                    █▓                                                     ▒█       
                                     ██                                                   ██        
                                       █▒                                               ▓█          
                                        ██░                                           ▒█            
                                           █░                                      ░▓█              
                                             █▓░       ▓▓▓░               ░▓▓▒  ░██                 
                                                ███▓▒░ ▒▓▓▓    ▒▓▓▓▓▓▓▓████▓▓▓▓▒█                   
                                                     █▓██▓▓▓▓██          ████▓▓▓██                  
                                                        ██▓▓██              ██▓▓██                  
                                                       ███▓██               █▓▓▓██                  
                                                     ██████              ███████                                        
</pre>
			</div>
			<p id="loadingText" data-text="pds is landing..." title="pds is landing...">pds is landing...</p>
      </div>
    {:then accountsData}
      <div id="account">
				<pre id="asciiart">
                              █▓░░░░░░░░░▒        
                            █▓▒           ░▒      
                         ▓▒▒▒░              ▒     
                       ▓▒░░░░                ░▓   
                     █▒  ░░     ░   ░   ▓▒    ░█  
                   ▓░    ░░     ▒▓░░▒▒░        ▒  
███████      ██▓▒░▒▒░   ░░░░       ░░░          ▒ 
█▓▓▓▓▓▓▓▓▓▓▓▓▓▒▓▓▓▓▓▒▒▓▒▒▒▓░                     ▓
        ███▓▒░░▒░░░░▓▓█▓▓▒░                      ░
                ▓                                ░
                █              ░                 ▒
                █░                              ▒█
                 ▒                             ▒  
                 █▒                           █   
                   ▓                        ░█    
                    ▓▒    ░░              ░▒      
                      ▓▒▒░░▒▓░  ░░░▒▒▓▓▒▓▓        
                          █▓█▓▓█    ███▓█         
                           ████      ████         
				</pre>
        <h1 onclick={birdbrain} id="header">shimaenaga pds</h1>
				<p id="subtitle">a project of <a href="https://veryroundbird.house" target="_blank">veryroundbird.house</a></p>
				{#if Config.SHOW_GUESTBOOK}
					<div id="guestbook">
						<button type="button" id="guestbookBtn" popovertarget="guestbookContents">say hi!</button>
						<div id="guestbookContents" popover>
							<div id="signInfo">You can sign the guestbook <a href="{Config.GUESTBOOK_POST}" target="_blank">here</a>!</div>
							<div id="guestbookPosts">
								{#if guestbookPosts.length > 0}
									{#each guestbookPosts as postObject}
                    <GuestbookPostComponent post={postObject.post} />
									{/each}
								{:else}
									<p class="noGuestbookPosts">No guestbook posts yet!</p>
								{/if}
							</div>
						</div>
					</div>
				{/if}
        <p class="accountCount">{accountsData.length} birds nesting here</p>
        <div id="accountsList">
          {#each accountsData as accountObject}
            <AccountComponent account={accountObject} />
          {/each}
        </div>
        <footer id="footer">{@html Config.FOOTER_TEXT}</footer>
      </div>
    {:catch error}
      <p>Error: {error.message}</p>
    {/await}

    <div id="feed">
      {#each posts as postObject}
        <PostComponent post={postObject as Post} />
      {/each}
      <InfiniteLoading on:infinite={onInfinite} distance={3000} />
    </div>
  </div>
	<div id="birdbrain" popover>
		<iframe width="560" height="315" src="https://www.youtube.com/embed/0iVlSNpq8i8?si=Ao4bcr_4HIBqsBy2" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
	</div>
</main>
