import emojis from './face.json'
import yayas from './yaya.json'

type EmojiAsset = {
  name: string
  url: string
  group: string
}

const emojiList: EmojiAsset[] = [...emojis, ...yayas]

function escapeHTML(str: string) {
  return str.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;')
}

export const parseEmoji = (content: string) => {
  if (!content) return ''

  let html = escapeHTML(content)

  emojiList.forEach((item) => {
    const escapedName = item.name.replace(/[.*+?^${}()|[\]\\]/g, '\\$&')

    const reg = new RegExp(escapedName, 'g')

    console.log(item.group)
    html = html.replace(
      reg,
      `<img
        src="${item.url}"
        alt="${item.name}"
        class="${item.group === 'yaya' ? 'w-8 h-8' : 'w-6 h-6'}"
        />`,
    )
  })

  return html
}
