<script lang="ts">
    import { onMount } from 'svelte';

    import { journalApi } from '$lib/stores/apiStore'
    import type { JournalEntry } from '$lib/dashclient'
    import { dateUpdate, currentDate } from '$lib/stores/appStore'
    import * as TxtArr from '$lib/modules/arrayHelpers';
    import MultiItemTextInput from '$lib/components/MultiItemTextInput.svelte';
    import InvertableIcon from '$lib/components/InvertableIcon.svelte';
    
    let updateTimeout: NodeJS.Timeout;

    let journalEntry : JournalEntry = {
        "date": $currentDate,
        "thankful": [],
        "lookingForward": [],
        "beenGreat": [],
        "doBetter": [],
        "journal": ""
    };
    
    function initJournalEntry(je: JournalEntry) {
        journalEntry.date = je.date;
        journalEntry.thankful = TxtArr.initTextArray(je.thankful);
        journalEntry.lookingForward = TxtArr.initTextArray(je.lookingForward);
        journalEntry.beenGreat = TxtArr.initTextArray(je.beenGreat);
        journalEntry.doBetter = TxtArr.initTextArray(je.doBetter);
        if (je.journal) {
            journalEntry.journal = je.journal.concat("");
        } else {
            journalEntry.journal = "";
        }
    }
    
    function prepareJournalEntryForWrite(entry: JournalEntry): JournalEntry {
        let je = {...entry};

        je.thankful = TxtArr.prepareTextArrayForWrite(je.thankful);
        je.lookingForward = TxtArr.prepareTextArrayForWrite(je.lookingForward);
        je.beenGreat = TxtArr.prepareTextArrayForWrite(je.beenGreat);
        je.doBetter = TxtArr.prepareTextArrayForWrite(je.doBetter);
        if (je.journal && je.journal === "") {
            je.journal = undefined;
        }
        
        return je;
    }
    
    async function fetchJournal() {
        journalApi.getJournalEntryForDate({'date': $currentDate}).then(resp => (initJournalEntry(resp)));
    }

    onMount(() => {
        $dateUpdate = fetchJournal;
        fetchJournal();
    });
    
    function writeJournalEntry() {
        clearTimeout(updateTimeout);
        
        updateTimeout = setTimeout(function() {
            journalApi.writeJournalEntry({journalEntry: prepareJournalEntryForWrite(journalEntry)});
        }, 1000);
    }
</script>

<div class="flex-col space-y-2 mt-8 align-middle">
    <div class="pl-1 w-8 h-8 absolute float-left ml-2">
        <InvertableIcon label="morgens" icon="/sun-solid.svg"/> 
    </div>
    <div class="w-11/12 m-auto pt-1">
        <h2 class="text-center text-lg m-2">Dankbar</h2>
        <MultiItemTextInput bind:textArray={journalEntry.thankful} onInput={writeJournalEntry}/>
    </div>

    <div class="w-11/12 m-auto">
        <h2 class="text-center text-lg m-2">Vorfreude</h2>
        <MultiItemTextInput bind:textArray={journalEntry.lookingForward} onInput={writeJournalEntry}/>
    </div>
</div>

<div class="flex-col space-y-2 mt-8 content-center">
    <div class="pl-1 w-8 h-7 absolute float-left ml-2">
        <InvertableIcon label="abends" icon="moon-solid.svg"/> 
    </div>

    <div class="w-11/12 m-auto pt-1">
        <h2 class="text-center text-lg m-2">Freude</h2>
        <MultiItemTextInput bind:textArray={journalEntry.beenGreat} onInput={writeJournalEntry}/>
    </div>

    <div class="w-11/12 m-auto">
        <h2 class="text-center text-lg m-2">Verzeihung</h2>
        <MultiItemTextInput bind:textArray={journalEntry.doBetter} onInput={writeJournalEntry}/>
    </div>
</div>

<div class="flex flex-col items-center mt-8 mb-8">
    <h1 class="m-2 text-xl text-center">Tagebuch</h1>
    <textarea class="rounded-md w-11/12 bg-slate-50 dark:bg-slate-900 h-32 min-h-full" bind:value={journalEntry.journal} on:input={writeJournalEntry}/>
</div>