<script setup lang="ts">
import { ref, watch, watchEffect } from "vue";

import Select from "primevue/select";

import { fetchLanguages } from "@/arches_component_lab/widgets/api.ts";

import type { Ref } from "vue";
import type {
    CardXNodeXWidgetData,
    Language,
} from "@/arches_component_lab/types.ts";
import type { LanguageValue } from "@/arches_component_lab/datatypes/language/types.ts";

const {
    aliasedNodeData,
    cardXNodeXWidgetData,
    shouldEmitSimplifiedValue = false,
} = defineProps<{
    cardXNodeXWidgetData: CardXNodeXWidgetData;
    aliasedNodeData: LanguageValue | null;
    shouldEmitSimplifiedValue?: boolean;
}>();

const emit = defineEmits<{
    (event: "update:value", updatedValue: LanguageValue | string | null): void;
    (event: "update:isLoading", isLoading: boolean): void;
}>();

const languages: Ref<Language[] | null> = ref<Language[] | null>(null);
const isLoading = ref(false);

watch(isLoading, (newValue) => {
    emit("update:isLoading", newValue);
});

watchEffect(async () => {
    isLoading.value = true;
    try {
        const response = (await fetchLanguages()) as {
            languages: Language[];
            request_language: string;
        };

        languages.value = response.languages;
    } finally {
        isLoading.value = false;
    }
});

function onUpdateModelValue(updatedValue: string | null) {
    if (shouldEmitSimplifiedValue) {
        emit("update:value", updatedValue);
    } else {
        const updatedDisplayValue =
            languages.value?.find(
                (option: Language) => option.code === updatedValue,
            )?.name || "";

        emit("update:value", {
            display_value: updatedDisplayValue,
            node_value: updatedValue,
            details: [],
        });
    }
}
</script>

<template>
    <Select
        option-value="code"
        option-label="name"
        :loading="isLoading"
        :options="languages as Language[]"
        :placeholder="cardXNodeXWidgetData.config.placeholder"
        :fluid="true"
        :model-value="aliasedNodeData?.node_value"
        @update:model-value="onUpdateModelValue($event)"
    />
</template>
