import React from 'react';

export namespace Localization {

    /************************************* PROVIDER *************************************/

    interface ContextProps {
        language: string,
        languages: string[],
        setLanguage: (language: string) => void,
    }

    export const Context = React.createContext<ContextProps>({
        language: '',
        languages: [],
        setLanguage: () => { },
    });

    interface ProviderProps {
        languages?: string[],
        children?: React.ReactNode | React.ReactNode[] | any,
    }

    export const Provider: React.FC<ProviderProps> = ({ languages, children }) => {
        const [language, setLanguage] = React.useState(
            (localStorage && localStorage.getItem("app-localization")) || "en"
        );
        const validateLanguages = (languages?: string[]) => {
            if (languages) {
                for (let i = languages.length - 1; i >= 0; i--) {
                    if (!languages[i]) {
                        languages.splice(i, 1)
                    }
                    else languages[i] = languages[i].toLowerCase();
                }
                if (!languages.find(x => x === 'en')) {
                    languages.unshift('en');
                }
            }
        }
        validateLanguages(languages);

        const handleLocalizationChange = (language: string) => {
            const internalLanguage = language
                ? language
                : 'en';
            if (localStorage) {
                localStorage.setItem("app-localization", internalLanguage);
            }
            setLanguage(internalLanguage);
        }
        return (
            <Context.Provider value={{
                language,
                languages: languages
                    ? languages
                    : ['en', 'es'],
                setLanguage: handleLocalizationChange,
            }}>
                {children}
            </Context.Provider >
        );
    }
}
export default Localization;