<template>
  <template v-for="(filter, i) in localFilterParams">
    <template v-if="filter.type === 'datetime-local'">
      <div class="panel-content-item">
        <form-date
          v-model="filter.values[0].val"
          :label="
            filter.title +
            (filter.between !== undefined && filter.between ? ' (Başlangıç)' : '')
          "
          @change="UpdateFilter(filter, 0)" />
        <form-select
          v-if="filter.range !== undefined && filter.range"
          :listData="filterOperator"
          v-model="filter.values[0].op"
          @change="UpdateFilter(filter, 0)"
          label="Operator" />
        <form-date
          v-if="filter.between !== undefined && filter.between"
          v-model="filter.values[1].val"
          :label="
            filter.title +
            (filter.between !== undefined && filter.between ? ' (Bitiş)' : '')
          "
          @change="UpdateFilter(filter, 1)" />
      </div>
    </template>
    <template v-if="filter.type === 'date'">
      <div class="panel-content-item">
        <form-date
          type="date"
          v-model="filter.values[0].val"
          :label="
            filter.title +
            (filter.between !== undefined && filter.between ? ' (Başlangıç)' : '')
          "
          @change="UpdateFilter(filter, 0)" />
        <form-select
          v-if="filter.range !== undefined && filter.range"
          :listData="filterOperator"
          v-model="filter.values[0].op"
          @change="UpdateFilter(filter, 0)"
          label="Operator" />
        <form-date
          v-if="filter.between !== undefined && filter.between"
          type="date"
          v-model="filter.values[1].val"
          :label="
            filter.title +
            (filter.between !== undefined && filter.between ? ' (Bitiş)' : '')
          "
          @change="UpdateFilter(filter, 1)" />
      </div>
    </template>
    <template v-if="filter.type === 'text'">
      <div class="panel-content-item">
        <form-input
          v-model="filter.values[0].val"
          :label="filter.title"
          @change="UpdateFilter(filter, 0)" />
        <form-select
          v-if="filter.range !== undefined && filter.range"
          :listData="filterOperator"
          v-model="filter.values[0].op"
          @change="UpdateFilter(filter, 0)"
          label="Operator" />
      </div>
    </template>
    <template v-if="filter.type === 'select'">
      <div class="panel-content-item">
        <form-select
          :listData="filterHead[filter.hIndex].filter.data"
          :listText="filterHead[filter.hIndex].filter.listText"
          :listVal="filterHead[filter.hIndex].filter.listVal"
          :extraData="{ f: filter, k: filterHead[filter.hIndex].filter.listText }"
          :label="filter.title"
          v-model="filter.values[0].val"
          @change="UpdateFilterSelect"
          clearable />
      </div>
    </template>
  </template>
</template>
<script setup lang="ts">
  import { ref } from 'vue'

  const props = defineProps<{
    filterHead: Record<string, any>[]
    filterParams: Record<string, any>[]
  }>()

  const emit = defineEmits(['update:filterParams'])
  const localFilterParams = ref<Record<string, any>[]>(props.filterParams)
  const filterOperator = ref<string[]>(['=', '<', '>'])

  const UpdateFilter = (filter: Record<string, any>, index: number) => {
    const allEmpty: boolean = filter.values.every(
      (obj: Record<string, any>) => obj.val === ''
    )
    if (filter.values[index].val === '') filter.values[index].text = ''
    filter.filter = !allEmpty
  }
  const UpdateFilterSelect = (
    e: Event,
    v: string,
    d: Record<string, any>,
    ext: Record<string, any>
  ) => {
    if (v !== '' && v !== null) {
      ext.f.values[0].val = v
      ext.f.values[0].text = d[ext.k]
      ext.f.filter = true
    } else {
      ext.f.filter = false
      ext.f.values[0].text = ''
    }
  }
</script>
