import React from 'react';
import type { I18nMessageJsxFormatterArgs } from '../types';

const MessageFragment: React.FC<{ children?: React.ReactNode }> = ({ children }) => <>{children}</>;

export const renderMessage = ({
    message,
    args,
}: {
    message: string;
    args: I18nMessageJsxFormatterArgs;
}) => {
    const rgx = /\{(.*?)\}/gim;
    let result = rgx.exec(message);
    let currentPos = 0;
    const elements: JSX.Element[] = [];

    while (result !== null) {
        const [, argName] = result;

        const ArgValue = args[argName] ?? `{${argName}}`;
        const substring = message.substring(currentPos, result.index);
        const key = `${argName}-${result.index}`;

        if (substring.length)
            elements.push(<MessageFragment key={`pre-${key}`}>{substring}</MessageFragment>);
        elements.push(
            typeof ArgValue === 'function' ? (
                <ArgValue key={key} />
            ) : (
                <MessageFragment key={key}>{ArgValue}</MessageFragment>
            )
        );

        currentPos = rgx.lastIndex;
        result = rgx.exec(message);
    }

    const substring = message.substring(currentPos);
    if (substring.length) elements.push(<MessageFragment key="end">{substring}</MessageFragment>);

    return <>{elements}</>;
};