<template>
    <div>
        <template v-if="sources.length > 10">
            <!-- <div class="uk-search uk-search-default uk-width-1-1">
                <span key="search" class="uk-search-icon-flip" uk-search-icon></span>
                <input ref="search" v-model="search" autofocus :placeholder="$t('Search')" class="uk-search-input" type="search">
            </div> -->

            <div class="uk-flex uk-flex-middle">
                <div class="uk-search uk-search-default uk-flex-1 uk-margin-right">
                    <input
                        ref="search"
                        v-model="search"
                        :placeholder="$t('Search')"
                        class="uk-search-input"
                        type="search"
                        autofocus
                    />
                </div>
                <div class="uk-flex uk-flex-right uk-flex-middle">
                    <button type="button" class="uk-button uk-button-default uk-button-small" @click.prevent="add">
                        {{ $t('Add') }}
                    </button>
                </div>
            </div>

            <hr class="uk-margin-remove" />
        </template>

        <div>
            <ul class="uk-nav uk-nav-default yo-sidebar-marginless yo-nav-iconnav uk-margin uk-margin-remove-bottom">
                <ResourceListItem
                    v-for="{ source, title, icon, meta, error, actions } in filtered"
                    :key="source.id"
                    :title="title"
                    :icon="icon"
                    :meta="meta"
                    :actions="actions"
                    :error="error"
                    :disabled="Boolean(error)"
                    @edit="edit(source)"
                    @copy="copy(source)"
                    @delete="remove(source)"
                >
                    <template v-if="error" #icon>
                        <span uk-icon="question" ratio="1.2"></span>
                    </template>
                </ResourceListItem>
            </ul>

            <div v-if="search && isEmpty(filtered)" class="uk-text-muted uk-margin">
                {{ $t('No Sources Found.') }}
            </div>
        </div>

        <button
            :class="{ 'uk-margin-medium-top': !isEmpty(sources) }"
            class="uk-button uk-button-default uk-width-1-1"
            type="button"
            @click.prevent="add"
        >
            {{ $t('Add Source') }}
        </button>

        <p class="uk-text-muted">
            {{ $t('Add a new source instance that will become part of the Dynamic Content workflow.') }}
        </p>
    </div>
</template>

<script>
import Vue from 'vue';
import { isEmpty } from 'uikit-util';
import { deepCopy } from '@essentials/core/util';
import { ModalForm, ResourceListItem, ResourcePicker } from '@essentials/core/components';

export default {
    name: 'SourcesSection',

    components: {
        ResourceListItem,
    },

    inject: {
        SourcesManager: {
            from: 'EssentialsSources',
        },
    },

    data: () => ({
        search: '',
    }),

    computed: {
        providers() {
            return this.SourcesManager.providers;
        },

        sources() {
            return this.SourcesManager.sources.map((source) => {
                const provider = this.providers[source.provider];
                const title = source.name || provider?.title || source.provider || this.$t('Unknown');

                const error = !provider ? this.$t('Invalid Source') : '';

                return {
                    source,
                    error,
                    title,
                    meta: !error ? provider?.title : '',
                    icon: provider?.icon,
                    actions: error ? ['delete'] : ['copy', 'delete'],
                };
            });
        },

        filtered() {
            return this.sources.filter(({ title, source: { provider } }) => {
                const value = [title, provider].map((v) => v?.toString().toLowerCase()).join(' ');
                return !this.search || ~value.indexOf(this.search.toLowerCase());
            });
        },
    },

    methods: {
        isEmpty,

        add() {
            this.$modal(ResourcePicker, { items: Object.values(this.providers) })
                .show({ container: true })
                .then((provider) => {
                    if (provider) {
                        this.edit(Vue.observable({ provider: provider.name }));
                    }
                });
        },

        edit(values) {
            const panel = this.providers[values.provider];

            this.$modal(ModalForm, { values, panel })
                .show()
                .then((values) => {
                    values && this.SourcesManager.save(values);
                });
        },

        // eslint-disable-next-line no-unused-vars
        copy({ id, ...source }) {
            source.name = source.name ? `${source.name} Copy` : '';
            this.SourcesManager.save(deepCopy(source));
        },

        remove(source) {
            this.SourcesManager.remove(source);
        },
    },
};
</script>
