<script setup>
import Multiselect from 'vue-multiselect';
import JsonQueryBuilderGroup from '@/Components/JsonQueryBuilderGroup.vue';
import { FolderAddIcon, PlusCircleIcon, TrashIcon, ArrowCircleRightIcon} from '@vue-hero-icons/outline';
import VueTailwindDatepicker from 'vue-tailwind-datepicker'
import { ref } from 'vue';
import { computed } from 'vue';

defineProps(['query', 'currentQuery', 'queryOptions', 'i18n']);
defineEmits(['update:query', 'update:queryOptions', 'runQuery']);

const level = ref(0);
const expanded = ref(true);
</script>

<template>

    <div class="q-pa-md row items-start q-gutter-md">
        <!-- Card -->
        <q-card class="my-card q-pa-sm">
            <!-- Header -->
            <q-card-section class="bg-red-4 text-white">
              <div class="row items-center">
                <div class="col text-h6">Query Builder</div>
                <q-card-actions align="right" class="col">
                        <q-btn
                            color="grey"
                            round
                            flat
                            dense
                            :icon="expanded ? 'keyboard_arrow_up' : 'keyboard_arrow_down'"
                            @click="expanded = !expanded"
                        />
                 </q-card-actions>
                </div>
            </q-card-section>

        <q-slide-transition>
          <div v-show="expanded">
          <q-separator />
            <JsonQueryBuilderGroup :currentQuery="query" :queryOptions="queryOptions" :level="level+1"> </JsonQueryBuilderGroup>
          </div>
        </q-slide-transition>

        <div class="row no-wrap justify-end q-mt-md q-pa-sm bg-grey-8 text-white">
              <q-btn rounded color="brown-4" @click="$emit('runQuery')" label="Spusti vyhľadávanie" icon="sync" />
        </div>
      </q-card>
</div>
</template>
