<script>
import { storeToRefs } from "pinia";
import { useFormStore } from "src/stores/forms";
import { defineComponent } from "vue";

export default defineComponent({
  name: "SortSelect",
  components: {},
  setup() {
    const formStore = useFormStore();
    const { sortProductFilters } = storeToRefs(formStore);

    function handleOrder(order) {
      sortProductFilters.value.order = order;
      sortProductFilters.value.isOpenOrderFilter = false;
    }

    return { sortProductFilters, handleOrder };
  },
});
</script>

<template>
  <div class="order-values" role="select">
    <div
      role="option"
      class="order-values-option"
      @click="handleOrder('lowest-price')"
    >
      <p class="filter-paragraph">menor precio</p>
    </div>

    <div
      role="option"
      class="order-values-option"
      @click="handleOrder('highest-price')"
    >
      <p class="filter-paragraph">mayor precio</p>
    </div>

    <div
      role="option"
      class="order-values-option"
      @click="handleOrder('latest')"
    >
      <p class="filter-paragraph">más recientes</p>
    </div>

    <div
      role="option"
      class="order-values-option"
      @click="handleOrder('recommended')"
    >
      <p class="filter-paragraph">recomendados</p>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.order-values {
  display: flex;
  flex-direction: column;
  gap: 4px;
  position: absolute;
  top: 22px;
  right: -10px;
  left: -20px;
  z-index: 10;
  background-color: $secondary-10;
  padding: 0px 10px 10px;
  padding-right: 10px;
  border-radius: 0px 0px 10px 10px;

  &-option {
    cursor: pointer;
    & .filter-paragraph {
      color: inherit;
      font-size: $font-14;
    }
  }
}
</style>
