<template>
  <div class="input-group mb-3">
    <input
      v-model="ticketId"
      type="number"
      class="form-control"
      :placeholder="trans(CHILL_TICKET_LIST_FILTER_TICKET_ID)"
      :disabled="disabled"
      @input="
        ticketId = isNaN(Number(($event.target as HTMLInputElement).value))
          ? null
          : Number(($event.target as HTMLInputElement).value)
      "
    />
    <span class="input-group-text" v-if="ticketId !== null">
      <i
        class="fa fa-times chill-red"
        style="cursor: pointer"
        @click="ticketId = null"
        title="clear"
      ></i>
    </span>
  </div>
</template>

<script setup lang="ts">
import { ref, watch } from "vue";
// Translation
import { trans, CHILL_TICKET_LIST_FILTER_TICKET_ID } from "translator";
const props = withDefaults(
  defineProps<{
    modelValue: number | null;
    disabled?: boolean;
  }>(),
  {
    disabled: false,
  },
);

const ticketId = ref<number | null>(props.modelValue);

watch(
  () => props.modelValue,
  (newVal) => {
    if (newVal === null) {
      ticketId.value = null;
    }
  },
);

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

watch(ticketId, (ticketId) => {
  emit("update:modelValue", ticketId ? ticketId : null);
});
</script>
