<script setup lang="ts">
import { watch } from 'vue'
import { useCurrencyInput } from 'vue-currency-input'

const props = withDefaults(
  defineProps<{
    modelValue: number | null
    locale?: string
    precision?: number
    allowNegative?: boolean
    valueRange?: { min?: number; max?: number }
    placeholder?: string
  }>(),
  {
    locale: 'fr-FR',
    precision: 2,
    allowNegative: false,
    valueRange: () => ({ min: 0, max: 1_000_000 }),
    placeholder: ''
  }
)

defineEmits<{ 'update:modelValue': [value: number | null] }>()

const { inputRef, setValue } = useCurrencyInput({
  currency: undefined as unknown as string,
  locale: props.locale,
  precision: props.precision,
  hideCurrencySymbolOnFocus: false,
  hideGroupingSeparatorOnFocus: false,
  valueRange: props.valueRange,
  autoDecimalDigits: false
})

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

<template>
  <input
    ref="inputRef"
    type="text"
    class="input input-bordered w-full"
    :placeholder="placeholder"
  />
</template>
