<script setup>
import Multiselect from '@/Components/MultiSelect.vue';
import TextInput from '@/Components/TextInput.vue';
import NumberInput from '@/Components/Number.vue';
import { FolderPlusIcon, PlusCircleIcon, TrashIcon} from '@heroicons/vue/24/solid';

import { ref, onMounted } from 'vue';
import { computed } from 'vue';
import VueTailwindDatepicker from 'vue-tailwind-datepicker';

const props = defineProps(['rule', 'options', 'i18n']);

const dateValue = ref([props.rule.value]);
const formatter = ref({
  date: 'D.M.YYYY',
  month: 'MMM'
});



const fieldValue = ref(selectByValue(props.options,"name",props.rule.id));

const rulesOperatorOptions = computed({
  get () {
    switch(fieldValue.value.type) {
    case 'Number': 
        return [
            {id: '=',  name: 'rovná sa'},
            {id: '!=',  name: 'nerovná sa'},
            {id: '>',  name: 'je väčšie'},
            {id: '<',  name: 'je menšie'},
            {id: '>=', name: 'je rovné, vačšie'},
            {id: '<=', name: 'je menšie, rovné'}
          ];
          case 'Date': 
        return [
            {id: '=',  name: 'rovná sa'},
            {id: '!=',  name: 'nerovný'},
            {id: '>',  name: 'je väčší'},
            {id: '<',  name: 'je menší'},
            {id: '>=', name: 'je rovný, vačší'},
            {id: '<=', name: 'je menši, rovný'}
        ];
        case 'String':
            default:
                return [
                    {id: '=',  name: 'rovná'},
                    {id: '!=',  name: 'nerovná sa'},
                    {id: 'in', name: 'je v'},
                    {id: 'not in', name: 'nieje v'},
                    {id: '()',  name: 'obsahuje'},
                    {id: '!()',  name: 'neobsahuje'},
                    {id: '(',   name: 'začína'},
                    {id: ')',   name: 'končí'},
                    {id: '!(',   name: 'nezačína'},
                    {id: '!)',   name: 'nekončí'}
                ];
            }
        },
    }
);


const criteria = ref(selectByValue(rulesOperatorOptions.value,"id",props.rule.operator));
const input = ref(props.rule.value);


function selectByValue(arr, id, value, single = true) {
    let filtered = arr.filter(a => a[id] == value);
    console.log(filtered);
    if (single && filtered.length > 0)
        return filtered[0];
    return filtered;
}

function FieldChange(val) {
    console.log(val);
    props.rule.id = val.name;
    fieldValue.value.type = val.type;
    input.value = null; 
    props.rule.value = null;
}

function CriteriaChange(params) {
    console.log(params);
    props.rule.operator = params.id;    
}

function DateChange(params) {
    console.log(params);
    props.rule.value = params[0];
}

function InputChange(params) {
    console.log(params);
    props.rule.value = params;
}
</script>


<template>
    <div class="flex justify-between ">
        <div class="p-3 grow text-gray-700 text-lg font-bold">
            <Multiselect @change-value="FieldChange" v-model="fieldValue" label="desc" trackby="desc" :options="options"></Multiselect>
        </div>
        <div class="p-3 text-gray-700 text-lg font-bold">
            <Multiselect @change-value="CriteriaChange" v-model="criteria" :value="criteria" :allow-empty="false" label="name" trackby="name" :options="rulesOperatorOptions"></Multiselect>
        </div>
        <div class="p-3 grow text-gray-700 text-lg font-bold">
            <vue-tailwind-datepicker as-single :formatter="formatter" i18n="sk" v-if="fieldValue.type == 'Date'"
                v-model="dateValue" @update:model-value="DateChange" />
            <TextInput v-if="fieldValue.type == 'String'" id="value" type="text" class="block w-full " v-model="input"
                required @update:model-value="InputChange" />
            <NumberInput v-if="fieldValue.type == 'Number'" id="value" type="number" class="block w-full " v-model="input"
                required @update:model-value="InputChange" />
        </div>
        <div class="p-3 text-gray-700 text-lg font-bold">
            <button
                @click="$emit('deleteRule')"
                class="text-slate-800 hover:text-blue-600 text-sm bg-red-400 hover:bg-slate-100 border border-slate-200 rounded-lg font-medium px-4 py-2 inline-flex space-x-1 items-center">
                <span>
                    <TrashIcon class="w-4 h-4 m-1" />
                </span>
            </button>
        </div>
    </div>
</template>