import React, { useContext, useMemo } from 'react';
import { I18nContext, I18nProvider } from './context';
import type { Dictionary, WithI18n } from './types';

export function withI18n<T extends React.ComponentType>(Page: T & WithI18n, keys: string[]) {
    const WithI18nWrapper: WithI18n &
        React.FC<
            React.ComponentProps<T> & { i18nMessages?: Dictionary; children?: React.ReactNode }
        > = ({ i18nMessages = {}, ...rest }) => {
        const { messages: parentMessages, locale } = useContext(I18nContext);

        const mergedMessages = useMemo(() => {
            let merged = i18nMessages;
            if (parentMessages) merged = { ...parentMessages, ...i18nMessages };

            return merged;
        }, [i18nMessages, parentMessages]);

        return (
            <I18nProvider messages={mergedMessages} locale={locale}>
                <Page {...(rest as any)} />
            </I18nProvider>
        );
    };

    WithI18nWrapper.i18nKeys = keys;
    WithI18nWrapper.i18nGetMessages = Page.i18nGetMessages;

    return WithI18nWrapper;
}