import { defineComponent, onMounted, PropType, ref, watch, computed } from 'vue'
import { tools } from '@/store/Modules/tools'

import { useQuasar } from 'quasar'
import { useI18n } from 'vue-i18n'
import { costanti } from '@costanti'

export default defineComponent({
  name: 'CNumericKeyboard',
  props: {
    modelValue: {
      type: String,
      required: false,
      default: '',
    },
    showInput: {
      type: Boolean,
      required: false,
      default: false,
    }
  },
  components: {},
  setup(props, { emit }) {
    const $q = useQuasar()
    const { t } = useI18n()

    const inputValue = ref(props.modelValue);

    watch(() => props.modelValue, (newVal) => {
      inputValue.value = newVal;
    });

    const displayValue = computed(() => {
      return inputValue.value === '' ? '0' : inputValue.value;
    });

    const handleInput = (value: string | number) => {
      // console.log('value', value)
      if (value === '⌫') {
        inputValue.value = inputValue.value.slice(0, -1);
      } else if (value === '.' && !inputValue.value.includes('.')) {
        inputValue.value += value.toString();
      } else if (typeof value === 'number') {
        inputValue.value += value.toString();
      }

      // console.log('inputValue.value', inputValue.value)

      // Verifica se inputValue contiene più di due cifre decimali
      const decimalPattern = /^\d+(\.\d{0,2})?$/; // Regex per validare il numero
      const newValue = inputValue.value;

      // Se non rispetta il formato, tronca il numero a 2 cifre decimali
      /*if (!decimalPattern.test(newValue)) {
        // Se troviamo un punto decimale, manteniamo solo le prime 2 cifre
        const parts = newValue.split('.'); // Dividi il numero in parte intera e decimale
        if (parts.length > 1) {
          // Ricomponi il numero con al massimo 2 cifre decimali
          inputValue.value = `${parts[0]}.${parts[1].substring(0, 2)}`;
        } else {
          // Nessuna parte decimale, quindi usa solo la parte intera
          inputValue.value = parts[0];
        }
      }*/

      emit('update:modelValue', inputValue.value);
    };

    function created() {
      // created
    }

    onMounted(created)

    return {
      t,

      costanti,
      tools,
      displayValue,
      handleInput,
    }
  },
})