<script setup lang="ts">
import { ref } from 'vue';
import Divider from 'primevue/divider';
import MultiSelect from 'primevue/multiselect';
import ToggleSwitch from 'primevue/toggleswitch';
import ModStoreEntry from './ModStoreEntry.vue';
import { usePkgStore } from '../stores';

const pkgs = usePkgStore();
const empty = ref(true);

const props = defineProps({
    search: String,
});

const list = () => {
    const res = pkgs.allRemote
        .filter(
            (p) =>
                props.search === undefined ||
                p.name.toLowerCase().includes(props.search.toLowerCase()) ||
                p.namespace
                    .toLowerCase()
                    .includes(props.search.toLowerCase()) ||
                p.description.toLowerCase().includes(props.search.toLowerCase())
        )
        .sort((p1, p2) => p1.name.localeCompare(p2.name));
    empty.value = res.length === 0;
    return res;
};
</script>

<template>
    <div class="flex gap-4 items-center">
        <div class="flex flex-col gap-2">
            <div class="flex gap-2">
                <div class="text-amber-400 grow">Show deprecated</div>
                <ToggleSwitch v-model="pkgs.showDeprecated" />
            </div>
            <div class="flex gap-2">
                <div class="text-red-400 grow">Show NSFW</div>
                <ToggleSwitch v-model="pkgs.showNSFW" />
            </div>
        </div>
        <div class="flex flex-col gap-2 grow">
            <MultiSelect
                size="small"
                :showToggleAll="false"
                placeholder="Include categories"
                v-model="pkgs.includeCategories"
                :options="[...pkgs.availableCategories]"
                class="w-full"
            />
            <MultiSelect
                size="small"
                :showToggleAll="false"
                placeholder="Exclude categories"
                v-model="pkgs.excludeCategories"
                :options="[...pkgs.availableCategories]"
                class="w-full"
            />
        </div>
    </div>
    <Divider />
    <div v-for="p in list()" class="flex flex-row">
        <ModStoreEntry :pkg="p" />
    </div>
    <div v-if="empty" class="text-3xl">∅</div>
</template>

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