<script setup>
import { FolderPlusIcon, PlusCircleIcon, TrashIcon} from '@heroicons/vue/24/solid';

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' : ''">
    <div class="flex items-center justify-between">
        <div class="p-3 text-gray-700 text-lg font-bold">
            <button
                class="font-bold text-slate-800 hover:text-blue-600 text-sm bg-white hover:bg-slate-100 border border-slate-200 rounded-l-lg font-medium px-4 py-2 inline-flex space-x-1 items-center"
                :class="currentQuery.condition == 'and' ? 'bg-blue-500' : 'bg-white'"
                @click="currentQuery.condition = 'and'">
                <span>AND</span>
            </button>
            <button
                class="text-slate-800 hover:text-blue-600 text-sm bg-white hover:bg-slate-100 border border-slate-200 rounded-r-lg font-medium px-4 py-2 inline-flex space-x-1 items-center"
                :class="currentQuery.condition != 'and' ? 'bg-blue-500' : 'bg-white'"
                @click="currentQuery.condition = 'or'">
                <span>OR</span>
            </button>
        </div>
        <div class="p-3 text-gray-700 text-md font-bold">
            <button v-if="level > 1"
                @click="$emit('deleteGroup')"
                class="text-slate-800 hover:text-blue-600 text-sm bg-red-300 hover:bg-slate-100 border border-slate-200 rounded-l-lg font-medium px-4 py-2 inline-flex space-x-1 items-center">
                <span>
                    <TrashIcon class="w-4 h-4" />
                </span>
                <span>Zmaž skupinu</span>
            </button>
            <button
                @click="AddGroup(currentQuery)"
                class="font-bold text-slate-800 hover:text-blue-600 text-sm bg-white hover:bg-slate-100 border border-slate-200 rounded--lg font-medium px-4 py-2 inline-flex space-x-1 items-center"
                :class="level == 1 ? 'rounded-l-lg' : ''">
                <span>
                    <FolderPlusIcon class="w-4 h-4" />
                </span>
                <span>Pridaj skupinu</span>
            </button>
            <button
                @click="AddRule(currentQuery)"
                class="text-slate-800 hover:text-blue-600 text-sm bg-white hover:bg-slate-100 border border-slate-200 rounded-r-lg font-medium px-4 py-2 inline-flex space-x-1 items-center">
                <span>
                    <PlusCircleIcon class="w-4 h-4" />
                </span>
                <span>Pridaj pravidlo</span>
            </button>
        </div>
    </div>
    <template 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>
    </template>
</div>
</template>