<script setup lang="ts">
import Button from 'primevue/button';
import ToggleSwitch from 'primevue/toggleswitch';
import { open } from '@tauri-apps/plugin-shell';
import InstallButton from './InstallButton.vue';
import ModTitlecard from './ModTitlecard.vue';
import { usePkgStore } from '../stores';
import { Package } from '../types';

const store = usePkgStore();

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

const toggle = (value: boolean) => {
    store.toggle(props.pkg, value);
};
</script>

<template>
    <div class="flex items-center">
        <ModTitlecard showVersion :pkg="pkg" />
        <ToggleSwitch
            class="scale-[1.33] shrink-0"
            inputId="switch"
            :disabled="!pkg?.loc"
            :modelValue="store.isEnabled(pkg)"
            v-on:value-change="toggle"
        />
        <InstallButton />
        <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 && open(pkg.loc.path ?? '')"
        />
        <Button
            rounded
            icon="pi pi-external-link"
            severity="info"
            aria-label="delete"
            size="small"
            class="ml-2 shrink-0"
            style="width: 2rem; height: 2rem"
            v-on:click="pkg?.rmt && open(pkg.rmt.package_url ?? '')"
        />
    </div>
</template>

<style></style>
