<template>
  <div
    v-if="uniqueAreas.length > 1"
    dir="auto"
    class="mb-2"
  >
    <div class="flex space-x-1 text-sm ml-1 -mt-3">
      <span>
        {{ t('appears_on') }}:
      </span>
      <a
        v-for="area in uniqueAreas"
        :key="area.uuid"
        href="#"
        class="link pr-0.5"
        @click.prevent="scrollIntoArea(area)"
      >
        {{ t('page') }} <template v-if="isMultipleDocs">{{ attachmentUuids.indexOf(area.attachment_uuid) + 1 }}-</template>{{ area.page + 1 }}
      </a>
    </div>
  </div>
</template>

<script>
export default {
  name: 'AppearsOn',
  inject: ['t', 'scrollIntoArea'],
  props: {
    field: {
      type: Object,
      required: true
    }
  },
  computed: {
    isMultipleDocs () {
      return this.attachmentUuids.length > 1
    },
    attachmentUuids () {
      return [...new Set(this.uniqueAreas.map((e) => e.attachment_uuid))]
    },
    uniqueAreas () {
      const areas = {}

      this.field.areas?.forEach((area) => {
        areas[area.attachment_uuid] ||= []
        areas[area.attachment_uuid].push(area)
      })

      const sortedAreas = Object.values(areas).reduce((acc, group) => {
        const seen = {}
        const sortedGroup = [...group].sort((a, b) => a.page - b.page)

        sortedGroup.forEach((area) => {
          if (!seen[area.page]) {
            seen[area.page] = true
            acc.push(area)
          }
        })

        return acc
      }, [])

      return sortedAreas.slice(0, 6)
    }
  }
}
</script>
