<script setup>
import { Replacer } from 'vue3-replacer';

import Mention from './components/Mention.vue';
import Hashtag from './components/Hashtag.vue';
</script>

<template>
   <Replacer
      text="Sample text https://yandex.com https://google.com @hello #JusticeForSomething"
   >
      <!-- Text will resolve #JusticeForSomething> -->
      <template #mention="text">
         <Mention>{{ text }}</Mention>
      </template>

      <!-- text will resolve https://yandex.com and then https://google.com> -->
      <template #url="text">
         <RouterLink :to="text">{{ text.slice(0, 12) }}</RouterLink>
      </template>

      <!-- text will resolve #JusticeForSomething -->
      <template #hashtag="text">
         <Hashtag>{{ text }}</Hashtag>
      </template>

      <!-- 
         If you want to resolve plain text a.k.a unmatched texts, you can 
         text can be whitespace too, ' '.
      -->
      <template #text>
         <span style="font-weight: bold">{{ text }}</span>
      </template>
   </Replacer>
</template>

<script setup>
import { Replacer } from 'vue3-replacer'
import type { Handler } from 'vue3-replacer';

const addCharacterToLastElement = (array, character) => {
   if(typeof array[array.length - 1] === 'string') {
      array[array.length - 1] += character;
      return;
   }

   array.push(character)
}

/**
 * @param { string } text / this will be given text prop.
 * @returns { string[] } splliter has to return string[] to run handlers per each word/split.
 */
const handleSplit = (text) => {
   /**
      Lets iterate over character by character.
      Create a new string element for brackets and push characters inside the bracket to that
      element. Push an empty string to array when you exit bracket.
   */
   const splittedByBrackets = [...text].reduce((acc, character) => {
      if (character === '(') {
         acc.push('(');
      } 
      else if (character === ')') {
         addCharacterToLastElement(acc, ')');
         acc.push('');
      }
      else {
         addCharacterToLastElement(acc, character);
      }

      return acc;
   }, [])

   /*
      We got: ['Hi how are you? ', '(sad)', ' ', '(happy)', ''], we need to get rid of empty strings.
   */
   return splittedByBrackets.filter(Boolean);
}

// Let's write our own handler for brackets.
// Custom handlers should be an array.
const customHandlers: Handler[] = [
   {
      name: 'brackets', // we will use this name as slot name.
      /*
         we will get each element of the array, we need to return `true` or `false`
         to let Replacer know what it is.

         You can use whatever you want as long as you return boolean.
      */
      check(text) {
         return text.startsWith('(') && text.endsWith(')')
      }
   }
]

</script>

<template>
   <Replacer
      text="Hi how are you? (sad) (happy)"
      :splitter="handleSplit"
      :customHandlers="customHandlers"
   >
      <!-- Lets resolve our brackets -->
      <template #brackets="text">
         <span style="color: purple">{{ text }} </span>
      </template>
   </Replacer>
</template>

<script>
import { Replacer } from 'vue3-replacer'
import type { Handler } from 'vue3-replacer'

const customHandlers: Handler[] = {
   // Default hashtag is overwritten;
   {
      name: 'hashtag',
      check(text) {
         return text.startsWith('#')
      }
   }
}
</script>

<template>
   <Replacer text="hi mom #good", :customHandlers="customHandlers">
      <template #hashtag="text"> {{ text }} </template>
   </Replacer>
</template>