import {useThemeProvider} from "@contexts/themeContext";
import MuiDrawer from '@mui/material/Drawer';
import styles from './styles.module.scss';
import SvgIcon from "@components/SvgIcon";
import {useDispatch, useSelector} from "react-redux";
import {isLogined} from "@features/mainSlice";
import {reqChangeInfo} from "@features/api";
import Popup from '@components/Popup';
import {Fragment} from 'react';
const i18n=global.i18n;

const WLangSelect=()=>{
    const {isMobile,isShowLang,setIsShowLang} = useThemeProvider();
    const isLogin=useSelector(isLogined);
    const dispatch = useDispatch();
    const onChangeLang=(lang)=>{
        i18n.setLocalLanguage(lang);
        setIsShowLang(false);
        // "DefaultLanguage": "en",
        //     "ThemeColor": "dark"
        if (!isLogin)return;
        let data={
            DefaultLanguage:lang
        }
        dispatch(reqChangeInfo(data));
    }
    const renderHeader=()=>{
        return (
            <>
                <div className={styles.header}>
                    <SvgIcon className={styles.icon} herf={"icon_Language"}/>
                    {i18n.t("settings.language")}
                </div>
                <div className={styles.line}/>
            </>
        )
    }
    const renderItem=(item,currlang)=>{
        return (
            <button key={item.key} className={`${styles.lang_item} ${currlang==item.lkey?styles.active:''}`} onClick={()=>{
                onChangeLang(item.lkey);
            }}>
                {item.name}
            </button>
        )
    }
    const renderContent=()=>{
        let langs=i18n.getAllLangs();
        let currlang=i18n.language;
        // console.log(currlang)
        return (
            <div className={styles.content}>
                {
                    langs.map((item,index)=>{
                        return (
                            <Fragment key = {index}>
                                {renderItem(item,currlang)}
                            </Fragment>
                            
                        )
                    })
                }
            </div>
        )
    }
    const renderLang=()=>{
        return (
            <div className={styles.container_m}>
                {renderHeader()}
                {renderContent()}
            </div>
        )
    }
    const renderMobile=()=>{
        return (
            <MuiDrawer open={isShowLang}
                       anchor={"bottom"}
                       sx={{
                           "& .MuiDrawer-paper": {
                               height: "50%",
                               boxSizing: "border-box",
                               overflow:'visible !important',
                               backgroundColor:'var(--standard);',
                               boxShadow:'var(--widget-shadow);',
                               borderTopLeftRadius:'1rem',
                               borderTopRightRadius:'1rem'
                           },
                       }}
                       variant="temporary"
                       onClose={()=>{
                           setIsShowLang(false)
                       }}>
                {renderLang()}
            </MuiDrawer>
        )
    }
    const renderDeskLang=()=>{
        return (
            <div className={`${styles.container_m}`}>
                {renderHeader()}
                {renderContent()}
            </div>
        )
    }
    const renderDesktop=()=>{
        return (
            <Popup popupClass={styles.pop_con} open={isShowLang} onClose={()=>{
                setIsShowLang(false);
            }}>
                {renderDeskLang()}
            </Popup>
        )
    }
    return (
        <>
            {
                isMobile()?renderMobile():renderDesktop()
            }
        </>
    )
}
export default WLangSelect;
