<template>
  <div v-if="isFirstItem || isDifferentPage" class="page-title">{{ result.pageNum }}</div>
  <div class="item-content" v-html="content"></div>
</template>

<script setup>
const {searchResults, result, currentIndex} = defineProps(['searchResults', 'result', 'currentIndex'])

const previousIndex = currentIndex === 0 ? currentIndex : currentIndex - 1
const currentItem = searchResults[currentIndex]
const previousItem = searchResults[previousIndex]
const isFirstItem = previousItem === currentItem
const isDifferentPage = previousItem.pageNum !== currentItem.pageNum
const regex = new RegExp(result.searchValue, "gi")
const content = result.content.replace(regex,  function (match, capture) {
  return `<span class="highlight">${match}</span>`
})

const goToPage = (page) => {
  core.pageNumberChanged({
    value: (page * 1 + 1).toString()
  })
}
</script>

<style lang="scss">
.search-container {
  .page-title {
    padding: 8px 16px;
    color: var(--c-side-title);
    background-color: var(--c-findbar-bg);
    font-size: 14px;
    line-height: 16px;
    text-align: right;
  }
  .item-content {
    padding: 6px 16px;
    color: var(--c-side-text);
    font-size: 14px;
    line-height: 20px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    .highlight {
      background: rgba(255, 236, 102, 1);
    }
  }
}
</style>
