<script lang="ts">
    import { loadRepos, repos } from '$lib/stores';
    import { timeSince, checkImage, IMAGE_URL_SUFFIX } from '$lib/api/git';
    import { toasts } from 'svelte-toasts';

    import GridGallery from '$lib/components/GridGallery.svelte';
    import Card from '$lib/components/Cards/Card.svelte';
    import Loading from '$lib/components/Loading.svelte';

    let repoImages: Record<string, string | null> = {};

    // When repos load, check for images
    $: if ($repos.length) {
        (async () => {
            for (const repo of $repos) {
                if (repoImages[repo.name] === undefined) {
                    const url = repo.html_url + IMAGE_URL_SUFFIX;
                    repoImages[repo.name] = (await checkImage(repo)) ? url : null;
                }
            }
        })();
    }
</script>

{#await loadRepos()}
    <Loading />
{:then _}
    {#if $repos.length == 0}
        {console.log('No Repos')}
        <div style="display: none;">
            {toasts.add({
                title: 'Error',
                description: 'Failed to load repositories',
                duration: 5000,
                type: 'error',
                placement: 'bottom-center',
                showProgress: true
            })}
        </div>
    {/if}
    <!-- Repositories loaded successfully -->
    <GridGallery>
        {#each $repos as repo}
            <!-- <Loading /> -->
            <Card
                containerStyle="group relative flex-1 min-w-[250px] max-w-full md:min-w-[33%] opacity-100 hover:opacity-100 hover:scale-[105%] md:opacity-70 transition-all duration-300 overflow-hidden"
            >
                <h2 slot="headerLeft">{repo.name}</h2>
                <h2 slot="headerRight" class="text-sm text-gray-500">
                    {repo.language}
                </h2>
                <div slot="content">
                    <div class="relative z-0">
                        {repo.description}
                    </div>
                    {#if repoImages[repo.name]}
                        <!-- svelte-ignore a11y_img_redundant_alt -->
                        <img
                            src={repoImages[repo.name]}
                            alt="repo image"
                            class="absolute left-0 bottom-0 h-full w-full object-cover rounded-2xl transition-transform duration-500 translate-y-full group-hover:translate-y-0 z-10 pointer-events-none"
                        />
                    {/if}
                </div>
                <h3 slot="footerLeft">
                    Last Updated: {timeSince(repo.updated_at)}
                </h3>
            </Card>
        {/each}
    </GridGallery>
{/await}
