<template>
  <div class="border-b mb-5 border-b-base-200">
    <div class="mb-2">Категория</div>
    <div v-if="categoriesStore.isLoading" class="skeleton h-10 w-full"></div>
    <select
        v-else
        v-model.number="props.filter.criteria.product_category_id.params.value"
        class="select w-full"
    >
      <option :value="null">Любая категория</option>
      <SelectOption
          v-for="category in categoriesStore.categories"
          :key="category.id"
          :level="0"
          :category="category"
      />
    </select>
  </div>
</template>

<script setup>
import {useCategoriesStore} from "@/stores/CategoriesStore.js";
import {onMounted} from "vue";
import SelectOption from "@/components/ProductFilters/Components/ProductCategory/SelectOption.vue";

const props = defineProps({
  filter: {
    required: true,
  },
});

const emit = defineEmits(['update:modelValue']);
const categoriesStore = useCategoriesStore();

onMounted(() => {
  categoriesStore.fetchCategories();
})
</script>

<style scoped lang="scss">

</style>