import React, { useEffect, useLayoutEffect, useState } from "react";
import { LanguageContextProps, LanguageProviderProps, Languages } from "./types";
import { LanguageContext } from "./context";




export function LanguageProvider(props: LanguageProviderProps) {

    const locstor = localStorage.getItem('i18nextLng');

    const [lang, setLang] = useState<string | null>(locstor);

    const changeLanguage = (_lang: string) => {
        localStorage.setItem('i18nextLng', _lang);
        setLang(_lang);
    }

    const isEnglish = () => {
        return lang === Languages.en;
    }

    const translate = (key: string) => {
        return props.translator(key);
    }

    useEffect(() => {
        if (!lang && props.defaultLang) {
            changeLanguage(props.defaultLang);
        }
    }, [props.defaultLang]);

    useLayoutEffect(() => {
        props.module.changeLanguage(lang);
        document.dir = props.module.dir(lang);
        document.body.dir = props.module.dir(lang);
        lang !== null ? document.documentElement.lang = lang : undefined;
        
    }, [lang, props.module]);


    const contextValue: LanguageContextProps = {
        lang: lang,
        defaultLang: lang,
        changeLanguage,
        isEnglish,
        t: translate
    };

    return (
        <LanguageContext.Provider
            value={contextValue}>
            {props.children}
        </LanguageContext.Provider>
    );
}