<template>
  <v-col
    :cols="xs"
    :sm="sm || xs"
    :md="md || sm || xs"
    :lg="lg || md || sm || xs"
    :xl="xl || lg || md || sm || xs"
    :xxl="xxl || xl || lg || md || sm || xs"
    :class="$attrs.class + ' px-2'"
  >
    <v-text-field
      ref="textField"
      v-model="value"
      :label="label"
      :error-messages="errorMessage"
      :name="name"
      autocomplete="section-blue one-time-code"
      @update:model-value="sendValue"
    />
  </v-col>
</template>

<script setup lang="ts">
import { MaybeRef, computed, ref } from "vue";
import { useField } from "vee-validate";
import { toTypedSchema } from "@vee-validate/zod";
import * as zod from "zod";
import { useUtils } from "../../composables/Utils";

const props = defineProps({
  name: {
    type: String,
    requird: true
  },
  label: {
    type: String,
    required: true
  },
  modelValue: {
    type: String,
    required: true
  },
  modelNumber: {
    type: Number,
    default: 0
  },
  xs: { type: String, default: "12" },
  sm: { type: String },
  md: { type: String },
  lg: { type: String },
  xl: { type: String },
  xxl: { type: String },
  required: {
    type: Boolean,
    default: false
  },
  min: {
    type: Number,
    default: 0
  }
});

const textField = ref(null);

const fieldName = computed<MaybeRef>(() => {
  return props.name;
});

const emit = defineEmits(["update:modelValue", "update:modelNumber"]);

const validationRules = computed<MaybeRef>(() => {
  if (!props.required) {
    return undefined;
  }

  return toTypedSchema(
    zod
      .string()
      .nonempty("Campo não pode ser vazio!")
      .refine(
        val => {
          if (props.min > 0) {
            return val.length >= props.min;
          }

          return true;
        },
        {
          message: `Campo deve ter no mínimo ${props.min} caracteres!`
        }
      )
  );
});

const { value, errorMessage } = useField<string>(fieldName, validationRules, {
  syncVModel: true
});

const sendValue = () => {
  const { amountFormated } = useUtils();

  const asValue = value.value.replaceAll(".", "").replaceAll(",", "");

  // tratar para o valor máximo ser 1 quatrilhão, já é mais que suficente
  if (asValue.length >= 21) {
    return;
  }

  // tratamento para se, digitar qualquer coisa diferente de um número, retornar vazio
  if (isNaN(Number(asValue))) {
    emit("update:modelValue", "");
    emit("update:modelNumber", 0);
    return;
  }

  // faz a divizão por 100 para já calcular o valor para usuário
  const numeralValue = Number(asValue) / 100;

  // se for um valor zerado, então retornar vazio
  if (numeralValue <= 0) {
    emit("update:modelValue", "");
    emit("update:modelNumber", 0);
    return;
  }

  // formatar o valor para um valor numeral, ou de modeda
  const inputLabel = amountFormated(numeralValue, false);

  //retornar valor formadato para input onde quer que ele seja usado
  emit("update:modelValue", inputLabel);
  emit("update:modelNumber", numeralValue);
};
</script>
