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

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

    import { onDestroy } from '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;
                }
            }
        })();
    }

    onMount(loadRepos);
</script>

<FlexGallery>
    {#each $repos as repo}
        <Card
            headerLeft={repo.name}
            headerRight={repo.language}
            footer={timeSince(repo.updated_at)}
            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"
        >
            <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}
        </Card>
    {/each}
</FlexGallery>
