<script setup lang="ts">
import { computed, onMounted, type Ref, ref } from "vue";

import type { SelectionItem } from "@/components/SelectionDialog/selectionTypes";
import { errorMessageAsString } from "@/utils/simple-error";

import SelectionDialog from "@/components/SelectionDialog/SelectionDialog.vue";

interface BasicItem extends SelectionItem {
    time: string | null;
}

interface Props {
    detailsKey?: string;
    getData: () => Promise<Array<object> | undefined>;
    isEncoded?: boolean;
    labelKey?: string;
    leafIcon?: string;
    timeKey?: string;
    title: string;
}

const props = withDefaults(defineProps<Props>(), {
    detailsKey: "",
    isEncoded: false,
    labelKey: "id",
    leafIcon: "",
    timeKey: "update_time",
});

const emit = defineEmits<{
    (e: "onCancel"): void;
    (e: "onOk", results: SelectionItem): void;
    (e: "onUpload"): void;
}>();

const errorMessage = ref("");
const items: Ref<Array<SelectionItem>> = ref([]);
const modalShow = ref(true);
const optionsShow = ref(false);
const showTime = ref(false);

const fields = computed(() => {
    const fields = [{ key: "label" }];
    if (props.detailsKey) {
        fields.push({ key: "details" });
    }
    if (showTime.value) {
        fields.push({ key: "time" });
    }
    return fields;
});

async function load() {
    optionsShow.value = false;
    try {
        // TODO: Consider supporting pagination here
        // this could potentially load quite a lot of items
        const incoming = await props.getData();
        if (incoming) {
            items.value = incoming.map((entry: any) => {
                const timeStamp = entry[props.timeKey];
                showTime.value = !!timeStamp;
                const item: BasicItem = {
                    id: entry.id,
                    label: entry[props.labelKey] || null,
                    details: entry[props.detailsKey] || null,
                    time: timeStamp || null,
                    entry: entry,
                    isLeaf: true,
                    url: "",
                };
                return item;
            });
        }
        optionsShow.value = true;
    } catch (err) {
        errorMessage.value = errorMessageAsString(err);
    }
}

onMounted(() => load());
</script>

<template>
    <SelectionDialog
        :error-message="errorMessage"
        :fields="fields"
        :options-show="optionsShow"
        :modal-show="modalShow"
        :is-encoded="isEncoded"
        :leaf-icon="leafIcon"
        :items="items"
        :title="title"
        @onCancel="emit('onCancel')"
        @onClick="emit('onOk', $event)" />
</template>
