<template>
  <q-input
    ref="inputRef"
    v-model="formattedValue"
    :dense="dense"
    :outlined="outlined"
    :class="className"
    :readonly="readonly"
    :borderless="borderless"
  >
    <template v-for="(_, slot) in slots" v-slot:[slot]="scope">
      <slot :name="slot" v-bind="scope || {}" />
    </template>
  </q-input>
</template>

<script setup lang="ts">
import { useCurrencyInput } from "vue-currency-input";
import { ref, useSlots, watch } from "vue";

const slots = ref<any>(useSlots());

const props = defineProps({
  modelValue: Number,
  dense: {
    type: Boolean,
    default: false,
  },
  outlined: {
    type: Boolean,
    default: false,
  },
  readonly: {
    type: Boolean,
    default: false,
  },
  borderless: {
    type: Boolean,
    default: false,
  },
  className: String,
});

const { inputRef, formattedValue, setValue } = useCurrencyInput({
  locale: "en-US",
  currency: "EUR",
  currencyDisplay: "hidden",
  hideCurrencySymbolOnFocus: true,
  hideGroupingSeparatorOnFocus: true,
  hideNegligibleDecimalDigitsOnFocus: true,
  autoDecimalDigits: false,
  useGrouping: true,
  accountingSign: false,
});

watch(
  () => props.modelValue,
  (value) => {
    setValue(value);
  }
);
</script>
