<script setup>
import { ref, watch } from 'vue';
import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome';
import { faFilter, faTimes } from '@fortawesome/free-solid-svg-icons';
import DatePicker from '@/Components/DatePicker.vue';

const props = defineProps({
  column: {
    type: Object,
    required: true,
  },
  value: {
    type: [String, Number, Array, null],
    default: null,
  },
  type: {
    type: String,
    default: 'text', // text, select, date, date-range, number
    validator: (v) => ['text', 'select', 'date', 'date-range', 'number'].includes(v),
  },
  options: {
    type: Array,
    default: () => [], // For select type: [{ value, label }]
  },
});

const emit = defineEmits(['update:value', 'clear']);

const internalValue = ref(props.value);

watch(
  () => props.value,
  (newVal) => {
    internalValue.value = newVal;
  }
);

watch(internalValue, (newVal) => {
  emit('update:value', newVal);
});

function clear() {
  internalValue.value = props.type === 'select' || props.type === 'date-range' ? null : '';
  emit('clear');
}
</script>

<template>
  <div class="relative">
    <!-- Filter Button -->
    <button
      type="button"
      :class="[
        'inline-flex items-center justify-center rounded-md px-2 py-1 text-xs font-medium transition-colors',
        value && value !== '' && (Array.isArray(value) ? value.length > 0 : true)
          ? 'bg-primary-100 text-primary-700 hover:bg-primary-200'
          : 'bg-gray-100 text-gray-600 hover:bg-gray-200',
      ]"
      @click.stop
    >
      <FontAwesomeIcon :icon="faFilter" class="h-3 w-3 mr-1" />
      {{ column.label }}
      <button
        v-if="value && value !== '' && (Array.isArray(value) ? value.length > 0 : true)"
        @click.stop="clear"
        class="ml-1.5 text-gray-500 hover:text-gray-700"
      >
        <FontAwesomeIcon :icon="faTimes" class="h-3 w-3" />
      </button>
    </button>

    <!-- Filter Dropdown -->
    <div
      v-if="showDropdown"
      class="absolute z-50 mt-1 w-64 rounded-md bg-white shadow-lg ring-1 ring-black ring-opacity-5"
      @click.stop
    >
      <div class="p-3">
        <!-- Text Filter -->
        <input
          v-if="type === 'text'"
          v-model="internalValue"
          type="text"
          :placeholder="`Filtriraj ${column.label.toLowerCase()}...`"
          class="block w-full rounded-md border-gray-300 text-sm shadow-sm focus:border-primary-500 focus:ring-primary-500"
        />

        <!-- Select Filter -->
        <select
          v-else-if="type === 'select'"
          v-model="internalValue"
          class="block w-full rounded-md border-gray-300 text-sm shadow-sm focus:border-primary-500 focus:ring-primary-500"
        >
          <option :value="null">Vse</option>
          <option v-for="opt in options" :key="opt.value" :value="opt.value">
            {{ opt.label }}
          </option>
        </select>

        <!-- Number Filter -->
        <div v-else-if="type === 'number'" class="space-y-2">
          <input
            v-model.number="internalValue"
            type="number"
            :placeholder="`Filtriraj ${column.label.toLowerCase()}...`"
            class="block w-full rounded-md border-gray-300 text-sm shadow-sm focus:border-primary-500 focus:ring-primary-500"
          />
        </div>

        <!-- Date Filter -->
        <DatePicker
          v-else-if="type === 'date'"
          v-model="internalValue"
          format="dd.MM.yyyy"
          placeholder="Izberi datum"
        />
      </div>
    </div>
  </div>
</template>

<script>
import { ref } from 'vue';

const showDropdown = ref(false);

// Close dropdown when clicking outside
if (typeof window !== 'undefined') {
  document.addEventListener('click', () => {
    showDropdown.value = false;
  });
}
</script>

