import { h, VNode } from 'preact';
import { createContext } from 'preact';
import { useContext, useState, useMemo } from 'preact/hooks';
import { defaultLanguageLocalStorageKeyName } from './localisation.constants';
import i18n from './i18n';

type ContextValue = [string, (v: string) => void];

export const LocalisationContext = createContext<ContextValue>([
    i18n.language,
    (): void => {
        // placeholder setter fn
    },
]);

export const useLocalisation = (): ContextValue => {
    const context: ContextValue = useContext(LocalisationContext);

    if (!context) {
        throw new Error(
            `useLocalisation must be used within a LocalisationProvider`
        );
    }

    return context;
};

export const LocalisationProvider = ({
    children,
}: {
    children: VNode;
}): VNode => {
    const [currentLanguage, setLanguage] = useState(i18n.language);

    const setCurrentLanguage = (lang: string): void => {
        i18n.activate(lang);
        setLanguage(lang);
        localStorage.setItem(defaultLanguageLocalStorageKeyName, lang);
    };

    const value: ContextValue = useMemo(
        () => [currentLanguage, setCurrentLanguage],
        [currentLanguage]
    );

    return (
        <LocalisationContext.Provider value={value}>
            {children}
        </LocalisationContext.Provider>
    );
};