<script setup>
import { ref } from 'vue';
import Note from './Note.vue';
import { CurrentNotes, TotalNotes } from '~/services/Content';

const noteContainer = ref(null);

const computedCurrentNotes = computed(() => {
    return CurrentNotes.value
    .map(key => TotalNotes.value.find(note => note.key === key))
    .filter(Boolean);
})

function calculateContainerWidth(){
    let dom = noteContainer.value;
    if (!dom) {
        return;
    }

    dom.style.width = CurrentNotes.value.length * 701 + "px";
    
    setTimeout(() => {
        for(let i = 0; i < dom.children.length; i++){
            let child = dom.children[i];
            child.style.left = (40 * i) + "px";
            child.style.right = (40 * (dom.children.length - i) - 700) + "px";
            child.style.zIndex = i + 1;
        }
    }, 0);
}

watch(CurrentNotes, calculateContainerWidth);

</script>

<template>
<div class="note-scrolling-container" id="note-scrolling-container">
    <div class="note-container" ref="noteContainer" >
        <Note v-for="element in computedCurrentNotes" :key="element.key" :text="element.text" :title="element.title" :noteKey="element.key"></Note>
    </div>
</div>
</template>

<style scoped>
.note-scrolling-container {
    overflow-x: auto;
    width: 100%;
    height: 100%;
    overflow-y: none;
}

.note-container {
    display: flex;
    height: 100%;
    margin: 0;
    background-color: var(--color-background);
}
</style>

<style>
</style>
