<template>
  <div ref="goodsRef" class="pb-10">
    <div class="flex flex-col">
      <header class="text-center shrink-0 p-3 font-bold text-xl">
        Фильтры
      </header>

      <main class="mt-5 px-5 pt-5 bg-base-200">
        <div
            v-if="filtersStore.draft?.rules && Object.keys(filtersStore.draft.rules).length > 0"
            v-for="(filter, filterId) in filtersStore.draft.rules"
        >
          <component
              v-if="componentMap[filterId]"
              :is="componentMap[filterId]"
              :filter="filter"
          />

          <p v-else>Not supported: {{ filterId }}</p>
        </div>

        <div v-else>
          Нет фильтров
        </div>
      </main>
    </div>

    <div
        class="fixed px-4 pb-10 pt-4 bottom-0 left-0 w-full bg-base-200 z-50 flex flex-col justify-between items-center gap-2 border-t-1 border-t-base-300">
      <button
          class="btn btn-link w-full"
          @click="resetFilters"
      >
        Сбросить фильтры
      </button>

      <button
          class="btn btn-primary w-full"
          @click="applyFilters"
      >
        Применить
      </button>
    </div>
  </div>
</template>

<script setup>
import {nextTick, onMounted} from "vue";
import {useProductFiltersStore} from "@/stores/ProductFiltersStore.js";
import ProductPrice from "@/components/ProductFilters/Components/ProductPrice.vue";
import ForMainPage from "@/components/ProductFilters/Components/ForMainPage.vue";
import {useRoute, useRouter} from "vue-router";
import ProductCategory from "@/components/ProductFilters/Components/ProductCategory/ProductCategory.vue";
import {useYaMetrikaStore} from "@/stores/yaMetrikaStore.js";
import {YA_METRIKA_GOAL} from "@/constants/yaMetrikaGoals.js";
import {useHapticFeedback} from "@/composables/useHapticFeedback.js";

defineOptions({
  name: 'Filters'
});

const componentMap = {
  RULE_PRODUCT_PRICE: ProductPrice,
  RULE_PRODUCT_FOR_MAIN_PAGE: ForMainPage,
  RULE_PRODUCT_CATEGORY: ProductCategory,
};

const router = useRouter();
const yaMetrika = useYaMetrikaStore();
const route = useRoute();
const emit = defineEmits(['close', 'apply']);

const filtersStore = useProductFiltersStore();
const haptic = useHapticFeedback();

const applyFilters = async () => {
  filtersStore.applied = JSON.parse(JSON.stringify(filtersStore.draft));
  console.debug('Filters: apply filters. Hash for router: ', filtersStore.paramsHashForRouter);
  haptic.impactOccurred('soft');
  yaMetrika.reachGoal(YA_METRIKA_GOAL.FILTERS_APPLY);
  await nextTick();
  router.back();
};

const resetFilters = async () => {
  filtersStore.applied = filtersStore.default;
  console.debug('Filters: reset filters. Hash for router: ', filtersStore.paramsHashForRouter);
  haptic.notificationOccurred('success');
  yaMetrika.reachGoal(YA_METRIKA_GOAL.FILTERS_RESET);
  await nextTick();
  window.scrollTo(0, 0);
  router.back();
};

onMounted(async () => {
  console.debug('Filters: OnMounted');
  window.document.title = 'Фильтры';

  yaMetrika.pushHit(route.path, {title: 'Фильтры'});
  yaMetrika.reachGoal(YA_METRIKA_GOAL.VIEW_FILTERS);

  if (filtersStore.applied?.rules) {
    console.debug('Filters: Found applied filters.');
    filtersStore.draft = JSON.parse(JSON.stringify(filtersStore.applied));
  } else {
    console.debug('No filters. Load filters from server');
    filtersStore.draft = await filtersStore.fetchFiltersForMainPage();
  }
});
</script>
