<template>
    <span class="uk-flex uk-flex-middle">
        <span class="uk-icon" uk-icon="database" ratio="0.5"></span>
        &nbsp;
        <span>{{ label }}</span>
    </span>
</template>

<script>
import api from '@yootheme/api';
import SourceExtended from '../../../../SourceExtended';

export default {
    name: 'SourceWidget',

    inject: ['$node'],

    props: {
        value: Object,
    },

    computed: {
        label() {
            return this.value?.label || this.mappedField?.text || this.$t('Source');
        },

        mappedField() {
            if (!this.matchedOption) {
                return;
            }

            const { Schema } = api.builder.helpers;
            const fields = Schema.getFields(this.matchedOption.source({ prop: this.value }));

            return fields.find((field) => field.value === this.value?.name) || {};
        },

        dynamicOptions() {
            return SourceExtended.getDynamicOptions({ node: this.$node }).filter(
                (opt) => opt.name !== 'composable'
            );
        },

        matchedOption() {
            return this.dynamicOptions.find((opt) => opt.match({ prop: this.value }));
        },
    },
};
</script>
