<script setup lang="ts">
import { ref } from 'vue';
import Chip from 'primevue/chip';
import { convertFileSrc } from '@tauri-apps/api/core';
import { listen } from '@tauri-apps/api/event';
import { invoke } from '../invoke';
import { Feature, Package } from '../types';
import { hasFeature, needsUpdate } from '../util';
import { useI18n } from 'vue-i18n';

const { t } = useI18n();

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

const icon = ref('/no-icon.png');

const reloadIcons = async () => {
    const src = props.pkg?.loc?.icon ?? props.pkg?.rmt?.icon;

    if (src === undefined) {
        icon.value = '/no-icon.png';
    } else if (src.startsWith('https://')) {
        icon.value = src;
    } else {
        const convt = convertFileSrc(src);
        if (await invoke('file_exists', { path: src })) {
            icon.value = convt;
        } else {
            icon.value = '/no-icon.png';
        }
    }
};

reloadIcons();

listen('reload-icons', reloadIcons);
</script>

<template>
    <img
        v-if="showIcon"
        :src="icon"
        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.replaceAll('_', ' ') ?? '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="
                    hasFeature(pkg, Feature.ChusanHook) ||
                    hasFeature(pkg, Feature.Mu3Hook)
                "
                v-tooltip="'Hook'"
                class="pi pi-wrench ml-1 text-blue-400"
            >
            </span>
            <span
                v-if="
                    hasFeature(pkg, Feature.Mu3IO) ||
                    hasFeature(pkg, Feature.ChuniIO)
                "
                v-tooltip="'IO'"
                class="pi pi-wrench ml-1 text-green-400"
            >
            </span>
            <span
                v-if="hasFeature(pkg, Feature.Aime)"
                v-tooltip="'Aime'"
                class="pi pi-credit-card ml-1 text-purple-400"
            >
            </span>
            <span
                v-if="
                    hasFeature(pkg, Feature.GameDLL) ||
                    hasFeature(pkg, Feature.AmdDLL)
                "
                v-tooltip="'DLL'"
                class="pi pi-cog ml-1 text-red-400"
            >
            </span>
            <span
                v-if="showNamespace && pkg?.namespace"
                class="text-sm opacity-75"
            >
                &nbsp;{{
                    t('by', { namespace: pkg.namespace }).replaceAll(
                        ' ',
                        '&nbsp;'
                    )
                }}
            </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>
