<template>
  <div class="flex items-center text-center">
    <button class="btn" :class="btnClassList" @click="dec" :disabled="disabled">-</button>
    <div class="w-10 h-10 flex items-center justify-center font-bold">{{ model }}</div>
    <button class="btn" :class="btnClassList" @click="inc" :disabled="disabled">+</button>
  </div>
</template>

<script setup>
import {computed} from "vue";
import {useHapticFeedback} from "@/composables/useHapticFeedback.js";

const model = defineModel();
const props = defineProps({
  max: Number,
  size: {
    type: String,
    default: '',
  },
  disabled: {
    type: Boolean,
    default: false,
  }
});

const haptic = useHapticFeedback();

const btnClassList = computed(() => {
  let classList = ['btn'];
  if (props.size) {
    classList.push(`btn-${props.size}`);
  }
  return classList;
});

function inc() {
  if (props.disabled) return;

  haptic.selectionChanged();

  if (props.max && model.value + 1 > props.max) {
    model.value = props.max;
    return;
  }

  model.value++;
}

function dec() {
  if (props.disabled) return;

  haptic.selectionChanged();

  if (model.value  - 1 >= 1) {
    model.value--;
  }
}
</script>
