<script setup lang="ts">
import type { PoiTag } from '@/domain/poi'
import { computed } from 'vue'

interface Props {
  tags: ReadonlyArray<Pick<PoiTag, 'code' | 'name'>>
  limit?: number
  compact?: boolean
  showOverflowCount?: boolean
}

const props = withDefaults(defineProps<Props>(), {
  limit: Number.POSITIVE_INFINITY,
  compact: false,
  showOverflowCount: true,
})

const normalizedLimit = computed(() => {
  if (!Number.isFinite(props.limit))
    return props.tags.length

  return Math.max(0, Math.floor(props.limit))
})

const visibleTags = computed(() => props.tags.slice(0, normalizedLimit.value))
const hiddenCount = computed(() => Math.max(0, props.tags.length - visibleTags.value.length))
</script>

<template>
  <view
    v-if="visibleTags.length > 0 || (showOverflowCount && hiddenCount > 0)"
    class="poi-tag-list"
    :class="{ 'poi-tag-list--compact': compact }"
    aria-label="特色标签"
  >
    <text
      v-for="tag in visibleTags"
      :key="tag.code"
      class="poi-tag-list__tag"
    >
      {{ tag.name }}
    </text>
    <text
      v-if="showOverflowCount && hiddenCount > 0"
      class="poi-tag-list__tag poi-tag-list__tag--overflow"
      :aria-label="`另有 ${hiddenCount} 个标签`"
    >
      +{{ hiddenCount }}
    </text>
  </view>
</template>

<style scoped lang="scss">
.poi-tag-list {
  display: flex;
  flex-wrap: wrap;
  gap: 12rpx;
  align-items: center;
}

.poi-tag-list__tag {
  display: inline-flex;
  align-items: center;
  min-height: 44rpx;
  padding: 4rpx 16rpx;
  font-size: 24rpx;
  line-height: 34rpx;
  color: #24664f;
  white-space: nowrap;
  background: #f1f8f5;
  border: 1rpx solid #c8ddd3;
  border-radius: 24rpx;
}

.poi-tag-list__tag--overflow {
  color: #6b7771;
  background: #f5f7f6;
  border-color: #d9e1dd;
}

.poi-tag-list--compact {
  gap: 8rpx;
}

.poi-tag-list--compact .poi-tag-list__tag {
  min-height: 36rpx;
  padding: 2rpx 12rpx;
  font-size: 20rpx;
  line-height: 30rpx;
}
</style>
