<script lang="ts" setup>
import { computed, PropType } from 'vue';
import { mdiChartTimelineVariant, mdiFileDocumentOutline, mdiFileOutline, mdiDatabase } from '@mdi/js';
import CardBox from '@/Components/CardBox.vue';
import PillTag from '@/Components/PillTag.vue';
import IconRounded from '@/Components/IconRounded.vue';
import dayjs from 'dayjs';
import relativeTime from 'dayjs/plugin/relativeTime';

// Extend dayjs to support relative times
dayjs.extend(relativeTime);

interface Dataset {
    account_id: number;
    created_at: string;
    creating_corporation: string;
    editor_id: number;
    embargo_date: string | null;
    id: number;
    language: string;
    main_abstract: string | null;
    main_title: string | null;
    preferred_reviewer: string | null;
    preferred_reviewer_email: string | null;
    project_id: number | null;
    publish_id: number;
    publisher_name: string;
    reject_editor_note: string | null;
    reject_reviewer_note: string | null;
    remaining_time: number;
    reviewer_id: number;
    server_date_modified: string;
    server_date_published: string;
    server_state: string;
    type: string;
    doi_identifier: string;
}

const props = defineProps({
    dataset: {
        type: Object as PropType<Dataset>,
        required: true
    }
});

const icon = computed(() => {
    switch (props.dataset.type) {
        case 'analysisdata':
            return { icon: mdiChartTimelineVariant, type: 'success' };
        case 'measurementdata':
            return { icon: mdiFileDocumentOutline, type: 'warning' };
        case 'monitoring':
            return { icon: mdiFileOutline, type: 'info' };
        case 'remotesensing':
            return { icon: mdiDatabase, type: 'primary' };
        case 'gis':
            return { icon: mdiDatabase, type: 'info' };
        case 'models':
            return { icon: mdiChartTimelineVariant, type: 'success' };
        case 'mixedtype':
            return { icon: mdiFileDocumentOutline, type: 'warning' };
        case 'vocabulary':
            return { icon: mdiFileOutline, type: 'info' };
        default:
            return { icon: mdiDatabase, type: 'secondary' };
    }
});

const displayTitle = computed(() => props.dataset.main_title || 'Untitled Dataset');

const doiLink = computed(() => {
    return `https://doi.tethys.at/10.24341/tethys.${props.dataset.publish_id}`;
});

const relativeDate = computed(() => {
    const publishedDate = dayjs(props.dataset.server_date_published);
    if (publishedDate.isValid()) {
        return publishedDate.fromNow();
    }
    return props.dataset.server_date_published;
});

// const displayBusiness = computed(() => props.dataset.publisher_name);
</script>

<template>
    <CardBox class="mb-6 last:mb-0" hoverable>
        <div class="flex items-start justify-between">
            <IconRounded :icon="icon.icon" :type="icon.type" class="mr-6" />
            <div class="flex-grow space-y-1 text-left" style="width: 70%;">
                <h4 class="text-lg truncate" >
                    {{ displayTitle }}
                </h4>
                <p class="text-gray-500 dark:text-slate-400">
                    <b>
                        <a :href="doiLink" target="_blank">View Publication</a>
                    </b>
                    • {{ relativeDate }}
                </p>
            </div>
            <div class="flex flex-col items-end gap-2">
                <p class="text-sm text-gray-500">{{ props.dataset.type }}</p>
                <PillTag :type="icon.type" :text="props.dataset.type" small class="inline-flex" />
            </div>
        </div>
    </CardBox>
</template>
