<script setup lang="ts">
import { Reactive, onMounted, reactive } from 'vue';
import { invoke } from '@tauri-apps/api/core';
import ModStoreEntry from './ModStoreEntry.vue';
import { ModEntry } from '../types';

const local: Reactive<{ [key: string]: ModEntry }> = reactive({});
const listings: Reactive<ModEntry[]> = reactive([]);

const reload = async () => {
    const modsRaw: ModEntry[] = await invoke('get_packages');
    Object.keys(local).forEach((key) => {
        delete local[key];
    });
    for (const m of modsRaw) {
        local[`${m.namespace}-${m.name}`] = m;
    }
};

onMounted(async () => {
    Object.assign(listings, await invoke('get_listings'));
    reload();
});
</script>

<template>
    <div v-for="l in listings" class="flex flex-row">
        <ModStoreEntry
            :mod="l"
            :isLocal="local[`${l.namespace}-${l.name}`] !== undefined"
            v-on:updated="reload()"
        />
    </div>
</template>

<style lang="scss">
@import 'primeicons/primeicons.css';
</style>
