<template>
  <SpaceInput
    v-bind="$props"
    :mask="amountMask"
    :max-length="15"
    :disabled="disabled"
    type="tel"
    @submit="$emit('submit')"
    v-model="amount"
  />
</template>

<script lang="ts">
import { defineComponent, ref, onMounted, watch } from "vue";
import SpaceInput from "./SpaceInput.vue";

export default defineComponent({
    emits: ['update:modelValue'],
    props: {
        modelValue: {
            type: [String, Number, Boolean]
        },
        label: {
            type: String
        },
        placeholder: {
            type: String
        },
        error: {
            type: String
        },
        tooltip: {
            type: String
        },
        disabled: {
            type: Boolean
        },
        hasIcon: {
            type: Boolean,
            default: false
        }
    },
    components: { SpaceInput },
    setup(props, { emit }) {
        const amount: any = ref(null);

        const amountMask = {
            mask: "num",
            blocks: {
              num: {
                mask: Number,
                thousandsSeparator: ",",
                radix: "."
              }
            }
        };

        onMounted(() => {
            if (props.modelValue) {
                amount.value = props.modelValue;
            };
        });

        watch(
            () => props.modelValue,
            (newVal) => {
                if (newVal !== amount.value) 
                    amount.value = newVal.toString();
            }
        );

        watch(
            amount,
            (newVal: any) => {
                const parsed = parseFloat(newVal);
                emit("update:modelValue", isNaN(parsed) ? null : parsed);
            }
        );

        return {
            amount,
            amountMask
        }
    }
});

// export default class AmountInput extends Vue {


//   @Watch("amount") onAmountChanged(newVal: any) {
//     const parsed = parseFloat(newVal);

//     this.$emit("input", isNaN(parsed) ? null : parsed);
//   }
// }
</script>
