<script setup lang="ts">
import { ref } from 'vue';
import Button from 'primevue/button';
import { invoke } from '../invoke';
import { usePkgStore } from '../stores';
import { Package } from '../types';
import { pkgKey } from '../util';

const pkgs = usePkgStore();

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

const deleting = ref(false);

const remove = async () => {
    if (props.pkg === undefined) {
        return;
    }

    deleting.value = true;

    await invoke('delete_package', {
        key: pkgKey(props.pkg),
    });

    deleting.value = false;
};
</script>

<template>
    <Button
        v-if="pkg?.loc && !pkg?.js.downloading"
        rounded
        icon="pi pi-trash"
        severity="danger"
        aria-label="remove"
        size="small"
        class="self-center ml-4"
        style="width: 2rem; height: 2rem"
        :loading="deleting"
        v-on:click="remove()"
    />

    <Button
        v-else
        rounded
        icon="pi pi-plus"
        severity="success"
        aria-label="install"
        size="small"
        class="self-center ml-4"
        style="width: 2rem; height: 2rem"
        :loading="pkg?.js.downloading"
        v-on:click="async () => await pkgs.install(pkg, true)"
    />
</template>
