<script setup>
import GuestLayout from '@/Layouts/GuestLayout.vue';
import InputError from '@/Components/InputError.vue';
import InputLabel from '@/Components/InputLabel.vue';
import PrimaryButton from '@/Components/PrimaryButton.vue';
import SecondaryButton from '@/Components/SecondaryButton.vue';
import TextInput from '@/Components/TextInput.vue';
import Multiselect from '@/Components/MultiSelect.vue';
import { Head, Link, useForm } from '@inertiajs/inertia-vue3';
import rpoFields from './Data/MultiSelectOptionsRPO';
import ConditionDisplay from '@/Components/ConditionStatement.vue';
import { ref } from 'vue';

const preoperator_val1 = ref(['-', 'NOT']);
const preoperator_val2 = ref(['AND', 'AND NOT', 'OR', 'OR NOT']);

const level = ref(0);
const podmienka = ref([]);
const count = ref(0);

const criteria_val = ref([
                           { name: "Obsahuje", operator: '%%%s%%'},
                           { name: "Začína", operator: '%s%%'},
                           { name: "Rovná sa", operator: '%s'}
                        ]);

const form = useForm({
    preoperator: '',
    field: '',
    value: '',
    criteria: '',
});

const submit = () => {
    form.post(route('search'), { });
};

const AddContition = () => {
    podmienka.value.push({pre: form.preoperator, field: form.field, value: form.value, criteria: form.criteria, level: level.value});
    count.value++;
    ConstructCondition(); 
}

const AddLevel = () => {
    level.value++;
    count.value=0; 
}

const RemLevel = () => {
    level.value--;
    count.value=0; 
}

const ConstructCondition = () => {

}
</script>

<template>
    <GuestLayout>
        <ConditionDisplay :conditions="podmienka"></ConditionDisplay>
        <Head title="Register" />

        

        <form @submit.prevent="submit">

                <InputLabel for="Operator" value="Operator" />
                <Multiselect v-model="form.preoperator" :options="count == 0 ? preoperator_val1 : preoperator_val2"></Multiselect>    
                
                <InputLabel for="field" value="Pole" />
                <Multiselect v-model="form.field" label="desc" trackby="desc" :options="rpoFields"></Multiselect>
                
                <InputLabel for="Kriteria" value="Kriteria" />
                <Multiselect v-model="form.criteria" label="name" trackby="name" :options="criteria_val"></Multiselect>

                <div class="mt-4">
                <InputLabel for="Hodnota" value="Hodnota" />
                <TextInput
                    id="value"
                    type="text"
                    class="mt-1 block w-full"
                    v-model="form.value"
                    required
                />
                <InputError class="mt-2" :message="form.errors.email" />
                </div>

            <pre>podmienka = {{ podmienka }} </pre>
            <pre>level = {{ level }}</pre>
            <pre>count = {{ count }}</pre>
                
            
            <div class="flex items-center justify-end mt-4">
                
                <PrimaryButton class="ml-4" :class="{ 'opacity-25': form.processing }" :disabled="form.processing">
                    Hľadaj
                </PrimaryButton>

                

                
                <SecondaryButton class="ml-4" @click="AddLevel">
                    <font-awesome-icon icon="fa-solid fa-right-from-bracket"/>
                </SecondaryButton>

                <SecondaryButton class="ml-4" @click="RemLevel">
                    <font-awesome-icon icon="fa-solid fa-right-to-bracket" />
                </SecondaryButton>

                <SecondaryButton class="ml-4" @click="AddContition">
                    <font-awesome-icon icon="fa-solid fa-circle-plus" />
                </SecondaryButton>


            </div>
        </form>
    </GuestLayout>
</template>
