<script setup>
import Multiselect from '@/Components/MultiSelect.vue';
import JsonQueryBuilderGroup from '@/Components/JsonQueryBuilderGroup.vue';
import TextInput from '@/Components/TextInput.vue';
import { FolderPlusIcon, PlusCircleIcon, TrashIcon, ArrowPathRoundedSquareIcon} from '@heroicons/vue/24/solid';
import VueTailwindDatepicker from 'vue-tailwind-datepicker'
import { ref } from 'vue';
import { computed } from 'vue';

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

const level = ref(0);

</script>

<template>
    
    <div class="container mx-auto mt-10">
        <!-- Card -->
        <div class="h-50 w-full rounded-lg bg-white ">
            <!-- Header -->
          <div class="flex items-center justify-between border-b bg-red-300">
            <div class="p-3 text-gray-700 text-lg font-bold">Query Builder</div>
            <div class="p-3 flex">
                <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path> v-if="!isVisible"</svg>
                <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path>   v-else </svg>
            </div>
          </div>
      
          <JsonQueryBuilderGroup :currentQuery="query" :queryOptions="queryOptions" :level="level+1"> </JsonQueryBuilderGroup>
    
        <div class="h-50 w-full rounded-lg bg-white ">
            <!-- Header -->
          <div class="flex items-center justify-between border-b bg-gray-300">
            <div class="p-3 text-gray-700 text-lg font-bold"></div>
            <div class="p-3 flex">
              <button
                @click="$emit('runQuery')"
                class="text-slate-800 hover:text-blue-600 text-sm bg-green-200 hover:bg-slate-100 border border-slate-200 rounded-lg font-medium px-4 py-2 inline-flex space-x-1 items-center">
                <span>
                    <ArrowPathRoundedSquareIcon class="w-4 h-4" />
                </span>
                <span>Spusti vyhľadávanie</span>
              </button>

            </div>
          </div>
        </div>
    </div>
</div>
</template>