<script setup lang="ts">
import { computed } from 'vue';
import Button from 'primevue/button';
import ToggleSwitch from 'primevue/toggleswitch';
import InstallButton from './InstallButton.vue';
import LinkButton from './LinkButton.vue';
import ModTitlecard from './ModTitlecard.vue';
import UpdateButton from './UpdateButton.vue';
import { invoke } from '../invoke';
import { usePkgStore, usePrfStore } from '../stores';
import { Feature, Package } from '../types';
import { hasFeature } from '../util';

const prf = usePrfStore();
const pkgs = usePkgStore();

const props = defineProps({
    pkg: Object as () => Package,
});

const model = computed({
    get() {
        return prf.isPkgEnabled(props.pkg).value;
    },
    async set(value: boolean) {
        await prf.togglePkg(props.pkg, value);
    },
});

const unsupported = computed(() => props.pkg!.loc!.status === 'Unsupported');

if (unsupported.value === true && model.value === true) {
    prf.togglePkg(props.pkg, false);
}
</script>

<template>
    <div class="flex items-center">
        <ModTitlecard show-version show-icon show-description :pkg="pkg" />
        <UpdateButton :pkg="pkg" />
        <span
            v-tooltip="
                unsupported &&
                'This package is currently incompatible with STARTLINER.'
            "
        >
            <ToggleSwitch
                v-if="hasFeature(pkg, Feature.Mod) || unsupported === true"
                class="scale-[1.33] shrink-0"
                inputId="switch"
                :disabled="unsupported === true"
                v-model="model"
            />
        </span>
        <InstallButton :pkg="pkg" />
        <Button
            rounded
            icon="pi pi-folder"
            severity="help"
            aria-label="delete"
            size="small"
            class="ml-2 shrink-0"
            style="width: 2rem; height: 2rem"
            v-on:click="
                pkg?.loc?.path && invoke('open_file', { path: pkg.loc.path })
            "
        />
        <LinkButton v-if="pkgs.networkStatus === 'online'" :pkg="pkg" />
    </div>
</template>

<style></style>
