<template>
    <DynamicDropdown
        v-if="view === 'source'"
        :options="dynamicOptions"
        :node="$node"
        :prop="values"
        @resolve="setSource"
    />
    <div v-else class="yo-dropdown-body uk-overflow-auto uk-height-max-large">
        <div class="uk-flex uk-flex-between uk-flex-middle uk-margin-bottom">
            <span class="uk-flex" style="align-items: baseline">
                <span class="uk-margin-right">
                    <span uk-icon="database" ratio="0.6"></span>
                    <span class="uk-text-small uk-disabled">{{ breadcrumb.join(' - ') }}</span>
                </span>
                <a
                    v-if="!values.label && !settingAlias"
                    href=""
                    class="uk-text-small"
                    @click.prevent="setAlias"
                    v-text="$t('Set Alias')"
                ></a>
                <input
                    v-else
                    ref="alias"
                    v-model="values.label"
                    class="uk-input uk-form-small uk-form-blank uk-form-width-small"
                    style="border: none"
                    :placeholder="$t('Alias')"
                />
            </span>
            <span>
                <a @click.prevent="view = 'source'">
                    <span uk-icon="more-vertical" class="uk-icon-link"></span>
                </a>
            </span>
        </div>
        <DynamicFieldDropdown :prop="values" :fields="fieldsets" :is-multi="isMultiSource" />
    </div>
</template>

<script>
import Vue from 'vue';
import api from '@yootheme/api';
import SourceExtended from '../../../../SourceExtended';
import DynamicDropdown from '../../../../components/DynamicDropdown/DynamicDropdown.vue';
import DynamicFieldDropdown from '../../../../components/DynamicField/DynamicFieldDropdown.vue';

export default {
    name: 'SourceWidgetDropdown',

    components: {
        DynamicDropdown,
        DynamicFieldDropdown,
    },

    inject: ['$node'],

    props: {
        values: Object,
    },

    data: () => ({
        view: '',
        settingAlias: false,
    }),

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

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

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

        matchedOption() {
            return this.dynamicOptions.find((opt) => opt.match({ prop: this.values }));
        },

        breadcrumb() {
            return [
                this.isList ? `[ ${this.mappedField.text} ]` : this.mappedField.text,
                this.isMultiSource ? `[ ${this.mappedField.group} ]` : this.mappedField.group,
            ].filter(Boolean);
        },

        fieldsets() {
            const { fieldsets } = SourceExtended.resolvePropFieldsets(this.mappedField);

            return fieldsets;
        },

        isMultiSource() {
            const { Source } = api.builder.helpers;
            const isMulti = Source.isMultipleSource(SourceExtended.path(this.$node, this.values));

            return Boolean(isMulti);
        },
    },

    created() {
        if (!this.values?.name) {
            this.view = 'source';
        }
    },

    methods: {
        setAlias() {
            this.settingAlias = true;
            this.$nextTick(() => {
                this.$refs.alias.focus();
            });
        },
        setSource({ name, query }) {
            Vue.set(this.values, 'name', name);

            delete this.values.query;
            delete this.values.filters;

            if (query) {
                Vue.set(this.values, 'query', query);
            }

            this.view = '';
        },
    },
};
</script>
