import { createComponent, ref, computed, watch, onCreated, onMounted } from "@charrue/vump";

createComponent({
  props: {
    default: {
      type: Number,
      default: 0
    }
  },
  setup(props) {
    const count = ref(props.default);
    const nextCount = ref(1);

    const sign = computed(() => {
      if (count.value === 0) return "";
      return count.value > 0 ? "+" : "-";
    });
    watch(count, (val) => {
      nextCount.value = val + 1;
    });

    const onIncrease = () => {
      count.value += 1;
    }
    const onDecrease = () => {
      count.value -= 1;
    }

    onCreated(() => {
      console.log("component created")
    })
    onMounted(() => {
      console.log("component attached")
    })

    return {
      count,
      sign,
      nextCount,

      onIncrease,
      onDecrease,
    }
  }
});