<template>
    <div class="uk-margin-remove-first-child">
        <ul
            v-if="!isEmpty(queries)"
            class="uk-nav uk-nav-default yo-sidebar-marginless uk-text-capitalize yo-nav-iconnav"
        >
            <li v-for="query in queries" :key="query.id" class="uk-visible-toggle">
                <a href @click.prevent="edit(query)">
                    <div lass="uk-flex">
                        <span>{{ query.name || getQueryLabel(query) }}</span>
                        <div v-if="query.name" class="uk-text-meta">{{ getQueryLabel(query) }}</div>
                    </div>
                </a>

                <div class="uk-invisible-hover uk-position-center-right uk-position-medium">
                    <ul class="uk-iconnav uk-flex-nowrap">
                        <li>
                            <a
                                href
                                :title="$t('Copy')"
                                class="uk-icon-link uk-preserve-width"
                                uk-icon="copy"
                                uk-tooltip="delay: 500"
                                @click.prevent="duplicate(query)"
                            ></a>
                        </li>
                        <li>
                            <a
                                href
                                :title="$t('Delete')"
                                class="uk-icon-link uk-preserve-width"
                                uk-icon="trash"
                                uk-tooltip="delay: 500"
                                @click.prevent="remove(query)"
                            ></a>
                        </li>
                    </ul>
                </div>
            </li>
        </ul>

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

        <p class="uk-text-muted">{{ $t('Global Queries for the Dynamic Content workflow.') }}</p>
    </div>
</template>

<script>
import api from '@yootheme/api';
import { isEmpty } from 'uikit-util';
import { deepCopy } from '@yooessentials/util';
import GlobalQueryModal from './GlobalQueryModal.vue';
import essentials from 'yooessentials';

export default {
    name: 'GlobalQueriesSection',

    props: {
        panel: Object
    },
    computed: {
        queries() {
            return essentials.helpers.Dynamic.queries;
        }
    },

    methods: {
        isEmpty,

        getQueryLabel(query) {
            const { Schema } = api.builder.helpers;

            return Schema.findField(query?.source?.query?.name || '')?.metadata?.label || 'Unknown';
        },

        async add() {
            let query = await api.uikit.promptModal(GlobalQueryModal);

            if (!query) {
                return;
            }

            query = essentials.helpers.Dynamic.saveGlobalQuery(query);
            this.edit(query);
        },

        edit(query) {
            const node = essentials.helpers.Dynamic.getGlobalQuery(query.id);
            essentials.helpers.Dynamic.editQuerySettings(node.source.query);
        },

        // eslint-disable-next-line no-unused-vars
        duplicate({ id, ...query }) {
            query.name = query.name ? `${query.name} Copy` : '';
            essentials.helpers.Dynamic.saveGlobalQuery(deepCopy(query));
        },

        remove(query) {
            essentials.helpers.Dynamic.removeGlobalQuery(query);
        }
    }
};
</script>
