<template>
    <form @submit.prevent="save">
        <slot name="header">
            <div class="uk-modal-header uk-flex uk-flex-middle uk-flex-between">
                <h3 class="uk-margin-remove">{{ $t('Source Query') }}</h3>
            </div>
        </slot>

        <div class="uk-modal-body">
            <SourcePanel :node="values" :builder="Builder" :panel="panel" :values="values" />
        </div>

        <div class="uk-modal-footer uk-flex uk-flex-middle uk-flex-right">
            <button class="uk-button uk-button-text uk-modal-close uk-margin-right" type="button">
                {{ $t('Cancel') }}
            </button>
            <button class="uk-button uk-button-primary" :disabled="!validated">
                {{ $t('Save') }}
            </button>
        </div>
    </form>
</template>

<script>
import essentials from 'essentials';
import { isEmpty } from 'uikit-util';
import SourcePanel from './SourcePanel';

export default {
    name: 'NewQueryModal',

    components: { SourcePanel },

    inject: {
        Builder: {
            default() {
                return essentials.Builder;
            },
        },
    },

    data: () => ({
        values: {},
        error: '',
    }),

    computed: {
        validated() {
            return this.values.name && this.values?.source?.query?.name;
        },

        panel() {
            return {
                title: 'Source Query',
                fields: {
                    name: {
                        label: 'Name',
                        description: 'A name to identify this query.',
                        attrs: {
                            autofocus: true,
                        },
                    },
                    _source: {
                        label: 'Source',
                        type: 'yooessentials-source-select',
                        description: 'Select a content source for which to make a query.',
                        omitgroups: ['', 'Page', 'Global'],
                        attrs: {
                            required: true,
                        },
                    },
                },
            };
        },
    },

    methods: {
        isEmpty,

        save() {
            this.$emit('resolve', this.values);
        },
    },
};
</script>
