<template>
  <div class="flex flex-col">
    <label :for="inputId" class="font-bold uppercase text-xl mb-2">{{ label }}</label>
      <div class="flex items-end gap-8">
          <input
              :id="inputId"
              :value="modelValue"
              v-maska="maskOptions"
              type="text"
              :maxlength="maxLength"
              :placeholder="placeholderText"
              class="border-b border-black flex-1 min-w-0 text-xl uppercase h-[30px]"
              @input="handleInput"
          />
          <UiCheckbox
              :id="checkboxId"
              :model-value="allowAny"
              label="Autoriser un format libre"
              wrapper-class="ml-auto"
              label-class="gap-3 whitespace-nowrap text-sm"
              input-class="h-4 w-4 accent-primary-500"
              @update:modelValue="handleAllowAnyChange"
          />
      </div>
  </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 handleAllowAnyChange = (nextValue: boolean) => {
  emit('update:allowAny', nextValue)
  if (!nextValue) {
    emit('update:modelValue', props.modelValue)
  }
}
</script>
