<script setup lang="ts">
import Chip from 'primevue/chip';
import { convertFileSrc } from '@tauri-apps/api/core';
import { Package } from '../types';
import { needsUpdate } from '../util';

const props = defineProps({
    pkg: Object as () => Package,
    showNamespace: Boolean,
    showVersion: Boolean,
    showCategories: Boolean,
    showDescription: Boolean,
    showIcon: Boolean,
});

const iconSrc = () => {
    const icon = props.pkg?.icon;

    if (icon === undefined) {
        return '';
    } else if (icon.startsWith('https://')) {
        return icon;
    } else {
        return convertFileSrc(icon);
    }
};
</script>

<template>
    <img
        v-if="showIcon"
        :src="iconSrc()"
        class="self-center rounded-sm"
        width="32px"
        height="32px"
    />
    <label class="m-3 align-middle text grow z-5 h-50px">
        <div>
            <span class="text-lg">
                {{ pkg?.name ?? 'Untitled' }}
            </span>
            <span
                v-if="pkg?.rmt?.deprecated"
                v-tooltip="'deprecated'"
                class="pi pi-exclamation-circle ml-1 text-amber-400"
            >
            </span>
            <span
                v-if="pkg?.rmt?.nsfw"
                v-tooltip="'NSFW'"
                class="pi pi-exclamation-triangle ml-1 text-red-400"
            >
            </span>
            <span
                v-if="pkg?.loc?.kind === 'Hook'"
                v-tooltip="'Hook'"
                class="pi pi-wrench ml-1 text-blue-400"
            >
            </span>
            <span
                v-if="pkg?.loc?.kind === 'IO'"
                v-tooltip="'IO'"
                class="pi pi-wrench ml-1 text-green-400"
            >
            </span>
            <span
                v-if="showNamespace && pkg?.namespace"
                class="text-sm opacity-75"
            >
                by&nbsp;{{ pkg.namespace }}
            </span>
            <span class="m-2">
                <span
                    v-if="showVersion && pkg?.loc?.version"
                    class="text-sm opacity-75"
                >
                    {{ pkg?.loc?.version ?? '?.?.?' }}
                </span>
                <span
                    v-if="showVersion && needsUpdate(pkg)"
                    class="text-sm opacity-75"
                >
                    -> {{ pkg?.rmt?.version ?? '?.?.?' }}</span
                >
            </span>
        </div>
        <div v-if="showDescription" class="text-sm opacity-75">
            {{ pkg?.description || 'No description' }}
        </div>
        <div v-if="showCategories" class="mt-1 flex gap-1">
            <span class="text-xs" v-for="c in pkg?.rmt?.categories"
                ><Chip :label="c"
            /></span>
        </div>
    </label>
</template>

<style scoped>
.p-chip {
    padding: 0.4rem !important;
    font-size: 0.66rem !important;
}
</style>
