<script>
    import { onMount }       from 'svelte';
    import { useTinyRouter } from 'svelte-tiny-router';

    import { api }           from '../../urls.svelte.js';
    import { error, yikes }  from '../../warn.svelte';
    import { t }             from '../../translations.svelte.js';
    import { user }          from '../../user.svelte.js';

    import List   from './List.svelte';

    let authors  = $state({});
    let loader       = {
        offset : 0,
        limit  : 20,
        active : true
    }
    let note     = $state({source:null,rendered:null});
    let notes    = $state(null);
    let {
        module = null,
        entity_id = null
    } = $props();

    async function loadNotes(){
        const url  = api(`notes?offset=${loader.offset}&limit=${loader.limit}`);

        const resp = await fetch(url,{credentials:'include'});
        if (resp.ok){
            const data = await resp.json();
            if (!notes) notes = [];
            notes.push(...Object.values(data.notes).sort((a, b) => b.id - a.id));
            authors    = {...authors, ...data.authors};
            loader.offset += loader.limit;
            loader.active  = false;
            console.log({authors});
            yikes();
            if (Object.keys(data.notes).length) onscroll(null); // when notes were received, check whether they fill up the page

        } else {
            error(resp);
        }
    }

    async function saveNote(){
        const url  = api(`notes/${module}/${entity_id}`);
        const resp = await fetch(url,{
            credentials : 'include',
            method      : 'POST',
            body        : note.source
        });
        if (resp.ok){
            let newNote       = await resp.json();
            authors[user.id]  = user;
            notes[newNote.id] = newNote;
            note              = {source:'',rendered:''};
            yikes();
            return true;
        } else {
            error(resp);
            return false;
        }
    }



    function onscroll(ev){
        if (window.innerHeight + window.scrollY >= document.body.offsetHeight && !loader.active) {
            loader.active = true;
            loadNotes();
        }
    }

    loadNotes(loadNotes)
</script>

<svelte:head>
    <title>Umbrella – {t('notes')}</title>
</svelte:head>

<svelte:window {onscroll} />
<List {notes} {authors} />
