<script setup>
import { computed } from "vue";
const props = defineProps({
  modelValue: { type: String, required: true },
  variant: { type: String, required: false },
  hideContent: { type: Boolean, required: false, default: false }
});
const labelMask = computed(() => {
  if (!props.hideContent) {
    if (props.variant == "mobilePhone") return props.modelValue.length == 10 ? `${props.modelValue.substring(0, 3)}-${props.modelValue.substring(3, 6)}-${props.modelValue.substring(6, 10)}` : "invalid format";
    if (props.variant == "homePhone") return props.modelValue.length == 9 ? `${props.modelValue.substring(0, 2)}-${props.modelValue.substring(2, 5)}-${props.modelValue.substring(5, 9)}` : "invalid format";
    if (props.variant == "citizenId") return props.modelValue.length == 13 ? `${props.modelValue.substring(0, 1)}-${props.modelValue.substring(1, 5)}-${props.modelValue.substring(5, 10)}-${props.modelValue.substring(10, 12)}-${props.modelValue.substring(12, 13)}` : "invalid format";
    if (props.variant == "creditCard") return props.modelValue.length == 16 ? `${props.modelValue.substring(0, 4)}-${props.modelValue.substring(4, 8)}-${props.modelValue.substring(8, 12)}-${props.modelValue.substring(12, 16)}` : "invalid format";
    const middlePart = "x".repeat(props.modelValue.length - 6);
    return `${props.modelValue.substring(0, 3)}${middlePart}${props.modelValue.slice(-3)}`;
  } else {
    if (props.variant == "mobilePhone") return props.modelValue.length == 10 ? `${props.modelValue.substring(0, 2)}x-xxx-${props.modelValue.substring(6, 10)}` : "invalid format";
    if (props.variant == "homePhone") return props.modelValue.length == 9 ? `${props.modelValue.substring(0, 2)}-xxx-${props.modelValue.substring(5, 9)}` : "invalid format";
    if (props.variant == "citizenId") return props.modelValue.length == 13 ? `${props.modelValue.substring(0, 1)}-xxxx-xxxxx-${props.modelValue.substring(10, 12)}-${props.modelValue.substring(12, 13)}` : "invalid format";
    if (props.variant == "creditCard") return props.modelValue.length == 16 ? `xxxx-xxxx-xxxx-${props.modelValue.substring(12, 16)}` : "invalid format";
    const middlePart = "x".repeat(props.modelValue.length - 6);
    return `${props.modelValue.substring(0, 3)}${middlePart}${props.modelValue.slice(-3)}`;
  }
});
</script>

<template>
  {{ labelMask }}
</template>
