<template>
  <div class="flex flex-col">
    <label :for="inputId" class="font-bold uppercase text-xl mb-4">{{ label }}</label>
    <input
      :id="inputId"
      :value="modelValue"
      v-maska="maskOptions"
      type="text"
      :maxlength="maxLength"
      :placeholder="placeholderText"
      class="border-b border-black justify-self-start text-xl pb-[6px] uppercase"
      @input="handleInput"
    />
    <label :for="checkboxId" class="mt-3 flex items-center gap-3 text-sm">
      <input
        :id="checkboxId"
        :checked="allowAny"
        type="checkbox"
        class="h-4 w-4 accent-primary-500"
        @change="toggleAllowAny"
      />
      Autoriser un format libre
    </label>
  </div>
</template>

<script setup lang="ts">
import { vMaska } from 'maska/vue'
type Props = {
  modelValue: string
  allowAny?: boolean
  label?: string
  id?: string
}

const props = withDefaults(defineProps<Props>(), {
  allowAny: false,
  label: 'Immatriculation',
  id: 'license-plate'
})

const emit = defineEmits<{
  (event: 'update:modelValue', value: string): void
  (event: 'update:allowAny', value: boolean): void
}>()

const inputId = computed(() => props.id)
const checkboxId = computed(() => `${props.id}-format`)

const maskOptions = computed(() =>
  props.allowAny
    ? undefined
    : {
        mask: '@@-###-@@',
        eager: true,
        tokens: {
          '@': {
            pattern: /[A-Za-z]/,
            transform: (char: string) => char.toUpperCase()
          }
        }
      }
)
const placeholderText = computed(() => (props.allowAny ? '' : 'AA-123-AA'))
const maxLength = computed(() => (props.allowAny ? 20 : 9))

const handleInput = (event: Event) => {
  const target = event.target as HTMLInputElement | null
  if (!target) {
    return
  }

  if (props.allowAny) {
    emit('update:modelValue', target.value)
    return
  }

  emit('update:modelValue', target.value)
}

const toggleAllowAny = (event: Event) => {
  const target = event.target as HTMLInputElement | null
  if (!target) {
    return
  }

  const nextValue = target.checked
  emit('update:allowAny', nextValue)
  if (!nextValue) {
    emit('update:modelValue', props.modelValue)
  }
}
</script>
