import { useTranslation } from "react-i18next";
import { ILanguageSelectorProps } from "./LanguageSelector.types";
import { FormControl, InputLabel, Select, MenuItem, makeStyles } from '@material-ui/core'
import { LANGUAGES } from "../../../Types/Constants";
import { useDispatch, useSelector } from "react-redux";
import { AppState } from "../../../Redux";
import { useCallback, useEffect } from "react";
import { setLanguage } from "../../../Redux/Language/actions";
import { WebStorage, WEB_STORAGE_KEYS } from "../../../Utilities/WebStorage";


const useStyles = makeStyles(() => ({
    formControl: {
        minWidth: (props: ILanguageSelectorProps) => props.minWidth ?? '100%'
    }
}))

const {
    ENGLISH,
    JAPANESE
} = LANGUAGES

const {
    PREFERRED_LANGUAGE
} = WEB_STORAGE_KEYS

const webStorage = new WebStorage(false)


function LanguageSelector(props: ILanguageSelectorProps) {
    const [t, i18n] = useTranslation('LanguageSelector')
    const classes = useStyles(props)
    const selectedLanguage = useSelector((state: AppState) => state.language.selectedLanguage)
    const dispatch = useDispatch()

    const handleChangeLanguage = useCallback(
        (e) => {
           let value = e.target.value 
           i18n.changeLanguage(value)
           dispatch(setLanguage(value))
           webStorage.store(PREFERRED_LANGUAGE, value)
        },
        [dispatch, i18n],
    )

    useEffect(() => {
        const preferredLanguage = webStorage.retrieve(PREFERRED_LANGUAGE)
    
        if(preferredLanguage) {
          i18n.changeLanguage(preferredLanguage)
          dispatch(setLanguage(preferredLanguage))
        }
        
      }, [dispatch,i18n])

    return (
        <>
            <FormControl variant="filled" className={classes.formControl}>
                <InputLabel style={{ fontWeight: 'bold' }}>{t('language')}</InputLabel>
                <Select
                    value={selectedLanguage}
                    onChange={handleChangeLanguage}
                >
                    <MenuItem value={ENGLISH}>{t(ENGLISH)}</MenuItem>
                    <MenuItem value={JAPANESE}>{t(JAPANESE)}</MenuItem>
                </Select>
            </FormControl>
        </>
    )

}

export default LanguageSelector