<script setup lang="ts">
import { apiBase } from '~/helpers';
import type { ApiTypeExternal } from '~/helpers';

type ExternalNameType = { [s: string]: string; }

const props = defineProps(['id'])
const id = props.id
const external_elements = useState<ExternalNameType>('external_elements', () => { return {} })
const name = ref()

const loadOneElement = async (id: string) => {
    external_elements.value[id] = 'loading'
    const data = await $fetch<ApiTypeExternal>(`${apiBase}/element/external/id/${id}`)
    external_elements.value[id] = data.Description
    name.value = external_elements.value[id]
}

if (external_elements.value[id]) {
    name.value = external_elements.value[id]
} else {
    await loadOneElement(id)
}
watch(external_elements, () => {
    if (name.value !== external_elements.value[id]) {
        name.value = external_elements.value[id]
    }
}, { deep: true })
</script>
<template>
    {{ name }}
</template>