<script setup lang="ts">
import { Ref, computed, ref } from 'vue';
import Button from 'primevue/button';
import Divider from 'primevue/divider';
import MultiSelect from 'primevue/multiselect';
import ToggleSwitch from 'primevue/toggleswitch';
import ModStoreEntry from './ModStoreEntry.vue';
import { invoke } from '../invoke';
import { usePkgStore, usePrfStore } from '../stores';
import { pkgKey } from '../util';

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

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

const gameSublist: Ref<string[]> = ref([]);

invoke('get_game_packages', {
    game: prf.current?.meta.game,
}).then((list) => {
    gameSublist.value = list as string[];
});

const list = () => {
    const res = pkgs.allRemote
        .filter((p) => gameSublist.value.includes(pkgKey(p)))
        .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;
};

const shouldShowRecommended = computed(() => {
    if (prf.current!.meta.game === 'ongeki') {
        return !pkgs.allLocal.some((p) => pkgKey(p) === 'segatools-mu3hook');
    }
    if (prf.current!.meta.game === 'chunithm') {
        return (
            !pkgs.allLocal.some((p) => pkgKey(p) === 'segatools-chusanhook') ||
            !pkgs.allLocal.some((p) => pkgKey(p) === 'mempatcher-mempatcher')
        );
    }
    return false;
});

const getRecommendedTooltip = () => {
    if (prf.current!.meta.game === 'ongeki') {
        return 'segatools-mu3hook';
    }
    if (prf.current!.meta.game === 'chunithm') {
        return 'segatools-chusanhook and mempatcher';
    }
    return '';
};

const installRecommended = () => {
    if (prf.current!.meta.game === 'ongeki') {
        pkgs.installFromKey('segatools-mu3hook');
    }
    if (prf.current!.meta.game === 'chunithm') {
        pkgs.installFromKey('segatools-chusanhook');
        pkgs.installFromKey('mempatcher-mempatcher');
    }
};
</script>

<template>
    <div class="flex gap-4 items-center">
        <div class="flex flex-col gap-2">
            <div class="flex gap-2">
                <div class="grow">Show installed</div>
                <ToggleSwitch v-model="pkgs.showInstalled" />
            </div>
            <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 />
    <Button
        v-if="shouldShowRecommended"
        label="Install recommended packages"
        v-tooltip="getRecommendedTooltip"
        icon="pi pi-plus"
        class="mb-3"
        @click="installRecommended"
    />
    <div v-for="p in list()" class="flex flex-row">
        <ModStoreEntry :pkg="p" />
    </div>
    <div v-if="empty" class="text-3xl">∅</div>
</template>
