<template>
  <div class="tp-shop-widget-content">
    <div class="tp-shop-widget-filter price__slider">
      <div id="slider-range" class="mb-10">
        {{ productsStore.price_values }}
        <Slider
          :value="productsStore.price_values"
          :tooltips="false"
          @change="productsStore.handlePriceChange"
          :max="productsStore.max_product_price"
        />
      </div>
      <div
        class="tp-shop-widget-filter-info d-flex align-items-center justify-content-between"
      >
        <span class="input-range">
          ${{ productsStore.price_values[0] }} - ${{ productsStore.price_values[1] }}
        </span>
        <button
          @click="handlePriceFilter"
          class="tp-shop-widget-filter-btn"
          type="button"
        >
          Filtrar
        </button>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import Slider from "@vueform/slider";
import "@vueform/slider/themes/default.css";
import { useProductFilterStore } from "@/pinia/useProductFilterStore";
import { useProductsStore } from "@/pinia/products/products.store";
const props = defineProps<{
  filter_dropdown?: boolean;
  filter_offcanvas?: boolean;
  load_more?: boolean;
  right_side?: boolean;
  shop_full?: boolean;
  shop_1600?: boolean;
}>();
const store = useProductFilterStore();
const productsStore = useProductsStore();
const router = useRouter();
const route = useRoute();

const handlePriceFilter = () => {
  const filters = productsStore.getQueryParams();
  router.push({
    path: '/search',
    query: filters,
  });
};

onMounted(() => {
  if (route.query.min_price && route.query.max_price) {
    productsStore.price_values = [
      Number(route.query.min_price),
      Number(route.query.max_price),
    ];
  }
});
</script>
