<script setup>
import { FolderAddIcon, PlusCircleIcon, TrashIcon} from '@vue-hero-icons/outline';

import JsonQueryBuilderRule from '@/Components/JsonQueryBuilderRule.vue';
import { ref, onMounted } from 'vue';
import { computed } from 'vue';

const props = defineProps(['currentQuery', 'queryOptions', 'i18n', 'level']);

function AddGroup(query) {
    console.log(query.rules);
    let len = query.rules.push({
          condition: 'and',
          rules: []
        });
    AddRule(query.rules[len-1]);
}

function DeleteGroup(query,item) {
    console.log(item);
    query.rules.splice(query.rules.indexOf(item), 1);
}

function AddRule(query){
    console.log(query.rules);
    query.rules.push({
        id: '',
        operator: '=',
        value: ''
    })
}

function DeleteRule(rules, rule) {
    console.log(rule);
    rules.splice(rules.indexOf(rule), 1);
}


</script>


<template>
<div :class="level > 1 ? 'border-4 border-blue-300 q-pa-xs' : 'q-pa-xs'">
    <div class="row q-pa-sm q-gutter-sm items-center justify-between">
        <div class="p-3 text-gray-700 text-lg font-bold">
            <q-btn-toggle
                v-model="currentQuery.condition"

                class="q-"
                no-caps
                rounded
                unelevated
                toggle-color="blue"
                color="white"
                text-color="primary"
                :options="[
                {label: 'AND', value: 'and'},
                {label: 'OR', value: 'or'}
                ]"
            />

        </div>
        <div class="p-3 text-gray-700 text-md font-bold">

             <q-btn-group push>
                <q-btn v-if="level > 1" @click="$emit('deleteGroup')" color="yellow" glossy text-color="black" push label="Zmaž skupinu" icon="delete" />
                <q-btn color="amber" @click="AddGroup(currentQuery)" glossy text-color="black" push label="Pridaj skupinu" icon="folder"/>
                <q-btn color="orange" @click="AddRule(currentQuery)" glossy text-color="black" push label="Pridaj pravidlo" icon="add" />
            </q-btn-group>

       </div>
    </div>
    <div class="q-pa-xs" v-for="(item) in currentQuery.rules" :key="item._uuid">
        <JsonQueryBuilderGroup v-if="typeof item.condition === 'string'" :currentQuery="item" :queryOptions="queryOptions" @delete-group="DeleteGroup(currentQuery,item)" :level="level + 1"></JsonQueryBuilderGroup>
        <JsonQueryBuilderRule v-else :rule="item" :options="queryOptions" @delete-rule="DeleteRule(currentQuery.rules,item)"></JsonQueryBuilderRule>
    </div>
</div>
</template>
<style>
.q-btn-group {
    border: 1px solid gray;
}
.border-4 {
    border: 4px solid blue;
}
</style>
