<script>
import { mapActions, mapMutations, mapState } from "vuex";

export default {
  name: "CantidadOllas",
  methods: {
    ...mapActions("ollas", ["actualizarCantidadOllas"]),
    ...mapMutations("pedido", ["setCantidadOllas"]),
    incrementar() {
      this.control += 1;
      this.actualizarDebounced();
    },
    decrementar() {
      this.control -= 1;
      this.actualizarDebounced();
    },
    async actualizarDebounced() {
      const params = { cantidad: this.control };
      clearTimeout(this.debounceTimer);
      this.debounceTimer = setTimeout(() => {
        this.setCantidadOllas(params);
        this.actualizarCantidadOllas(params);
      }, 500);
    }
  },
  computed: {
      ...mapState("pedido", ["cantidad_de_ollas"])
  },
  data() {
    return {
      debounceTimer: null,
      control: 0,
    };
  },
  watch: {
    cantidad_de_ollas() {
      this.control = this.cantidad_de_ollas;
    }
  },
}
</script>

<template>
    <div class="notification has-text-centered">
        <label class="label">Cantidad de ollas:</label>
        <div class="field has-addons is-justify-content-center contador">
            <div class="control">
                <button class="button is-small"
                        :disabled="control < 1"
                        @click.capture="decrementar">
                    <i class="fa fa-solid fa-minus"></i>
                </button>
            </div>
            <div class="control">
                <input id="cantidad"
                       v-model="control"
                       class="input is-small has-text-centered m-0 p-0"
                       type="number"
                       @input="actualizarDebounced">
            </div>
            <div class="control">
                <button class="button is-small" @click="incrementar">
                    <i class="fa fa-solid fa-plus"></i>
                </button>
            </div>
        </div>
    </div>
</template>

<style scoped>
</style>
