import Image from "next/image";

export function replaceWithImageTags(index, str, emoji_path) {
  if (index % 2 === 0) {
    return <p className="inline">{`${str}`}</p>;
  } else {
    return (
      <>
        <span className="object-contain relative inline-block w-8 h-8 mb-1 align-middle">
          <Image src={emoji_path} layout="fill" objectFit="contain" alt={str} />
        </span>
      </>
    );
  }
}

export function formatCustomEmoji(str, emoji_paths) {
  const emoji_pattern = new RegExp(/(:[A-Za-z_-]+:)/, "g");
  const values = emoji_pattern[Symbol.split](str);
  if (Boolean(emoji_paths)) {
    return (
      <>
        {Object.keys(values).map((v) =>
          replaceWithImageTags(v, values[v], emoji_paths[values[v]])
        )}
      </>
    );
  } else {
    return <></>;
  }
}

export function renderPossibleInfo(info, emoji_paths) {
  if (Boolean(info)) {
    let infoarray = info.split("\n");
    infoarray = infoarray.slice(0, infoarray.length - 1);
    const infodict = Object.assign({}, infoarray);
    return Object.keys(infodict).map((info) => (
      <div key={info}>
        {infodict[info] == "" ? (
          <br />
        ) : (
          formatCustomEmoji(infodict[info], emoji_paths)
        )}
      </div>
    ));
  } else {
    return <></>;
  }
}

export default function IdentityCardTextBox({ info }) {
  let infoarray = [];
  let infodict = {};
  if (info) {
    infoarray = info.split("\n");
    infoarray = infoarray.slice(0, infoarray.length - 1);
    infodict = Object.assign({}, infoarray);
  }
  return (
    <div className="p-4 text-center text-md sm:text-lg ring-2 ring-alice-werefox-red-dark dark:ring-alice-werefox-red">
      {renderPossibleInfo(info, {})}
    </div>
  );
}