import { memo } from 'preact/compat';

import mem from '../utils/mem';

import CustomEmoji from './custom-emoji';

const shortcodesRegexp = mem((shortcodes) => {
  return new RegExp(`:(${shortcodes.join('|')}):`, 'g');
});

function EmojiText({ text, emojis }) {
  if (!text) return '';
  if (!emojis?.length) return text;
  if (text.indexOf(':') === -1) return text;
  // const regex = new RegExp(
  //   `:(${emojis.map((e) => e.shortcode).join('|')}):`,
  //   'g',
  // );
  const regex = shortcodesRegexp(emojis.map((e) => e.shortcode));
  const elements = text.split(regex).map((word) => {
    const emoji = emojis.find((e) => e.shortcode === word);
    if (emoji) {
      const { url, staticUrl } = emoji;
      return (
        <CustomEmoji staticUrl={staticUrl} alt={word} url={url} key={word} />
      );
    }
    return word;
  });
  return elements;
}

export default mem(EmojiText);

// export default memo(
//   EmojiText,
//   (oldProps, newProps) =>
//     oldProps.text === newProps.text &&
//     oldProps.emojis?.length === newProps.emojis?.length,
// );