<template>
  <div class="d-flex align-center ga-2 flex-wrap">
    <span v-if="formatted">
      {{ formatted }}
    </span>

    <v-chip
      v-if="extraCount > 0 && !showAll"
      density="comfortable"
      size="small"
    >
      + {{ extraCount }}
    </v-chip>
  </div>
</template>

<script setup lang="ts">
const props = defineProps({
  plateNumbers: {
    type: Array as PropType<string[]>,
    default: () => []
  },
  defaultValue: {
    type: String,
    default: ""
  },
  showAll: {
    type: Boolean,
    default: false
  }
})

const formatted = computed(() => {
  if (!props.plateNumbers?.length) return props.defaultValue || ""

  if (props.showAll) {
    return props.plateNumbers.map((v: any) => v?.plateNumber || "").join(", ")
  }

  const firstTwo = props.plateNumbers
    .slice(0, 2)
    .map((v: any) => v?.plateNumber || "")

  return firstTwo.join(", ")
})

const extraCount = computed(() => {
  if (!props.plateNumbers) return 0
  return props.plateNumbers.length > 2
    ? props.plateNumbers.length - 2
    : 0
})
</script>
