import styles from './styles.module.scss';
import {useDispatch, useSelector} from "react-redux";
import {ReactComponent as EmptyAvatar} from '@assets/avatar_empty.svg';
import {getLogoutStatus, getUserInfo, isLogined} from "@features/mainSlice";
import Spring from "@components/Spring";
import {useNavigate} from "react-router-dom";
import {ROUTE_PATH} from "@constants/routes";
import LazyImage from "@components/LazyImage";
import USD from "@assets/lvicon/USD.black.png";
import {numFormatter} from "@utils/helpers";
import SvgIcon from "@components/SvgIcon";
import {ReactComponent as Male} from '@assets/singlesvg/gener/male.svg';
import {ReactComponent as FeMale} from '@assets/singlesvg/gener/female.svg';
import {ReactComponent as GenderIcon} from '@assets/singlesvg/gener/gender.svg';
import {ReactComponent as MobileIcon} from '@assets/singlesvg/mobile.svg';
import {ReactComponent as EmailIcon} from '@assets/singlesvg/email.svg';
import {CopyToClipboard} from 'react-copy-to-clipboard';
import {toast} from "react-toastify";
import ToggleButtonGroup from "@mui/material/ToggleButtonGroup";
import {StyledThemeTabs} from "@layout/Sidebar/styles";
import {useThemeProvider} from "@contexts/themeContext";
import ToggleButton from "@mui/material/ToggleButton";
import {reqChangeInfo, reqLogout} from "@features/api";
import {REQ_STATUS} from "@api/config";
import SmallLoading from "@components/SmallLoading";
import {APP_GENDER, APP_THEME} from "@constants/app";
const i18n=global.i18n;
const UserSettings=()=>{
    const isLogin=useSelector(isLogined);
    const user=useSelector(getUserInfo);
    const logoutStatus=useSelector(getLogoutStatus);
    const dispatch = useDispatch();
    const navigate=useNavigate();
    const {theme, toggleTheme,setIsShowLang} = useThemeProvider();
    const renderEmpty=()=>{
        return (
            <div className={styles.wrap_item}>
                <div className={styles.user_info}>
                    <EmptyAvatar className={styles.avatar_empty}/>
                    <div className={styles.empty_info}>
                        <span className={styles.welcome}>
                            {i18n.t("settings.user_info.welcome")}
                        </span>
                        <span className={styles.login_tips}>
                            {i18n.t("settings.user_info.tips")}
                        </span>
                    </div>
                </div>
                <div className={styles.login_con}>
                    <button className={`button-gray ${styles.button}`} onClick={()=>{
                        navigate(ROUTE_PATH.SIGN_IN);
                    }}>
                        {i18n.t("sign_in")}
                    </button>
                    <button className={`button-green ${styles.button}`} onClick={()=>{
                        navigate(ROUTE_PATH.SIGN_UP);
                    }}>
                        {i18n.t("sign_up")}
                    </button>
                </div>
            </div>
        )
    }
    const getPhone=()=>{
        let loc=user.RegisterLocation;
        let phone=user.Phone;
        if (phone.startsWith(loc)){
            phone=phone.replace(loc,"");
        }
        return phone;
    }
    const getEmail=()=>{
        let email=user.Email;
        if (email==null||email==""){
            return "--";
        }
        return email;
    }
    const renderPhone=()=>{
        return (
            <div className={styles.action_item}>
                <div className={styles.action_left}>
                    <MobileIcon className={styles.icon}></MobileIcon>
                    <div>{i18n.t("settings.phone")}</div>
                </div>
                <div className={styles.action_right}>
                    <div>{"+"+user.RegisterLocation}</div>
                    <div>{getPhone()}</div>
                </div>
            </div>
        )
    }
    const renderEmail=()=>{
        return (
            <div className={styles.action_item}>
                <div className={styles.action_left}>
                    <EmailIcon className={styles.icon}></EmailIcon>
                    <div>{i18n.t("settings.email")}</div>
                </div>
                <div className={styles.action_right}>
                    <div>{getEmail()}</div>
                </div>
            </div>
        )
    }
    const renderUser=()=>{
        let gender=(<></>);
        if (user.Gender===APP_GENDER.FEMALE){
            gender=(<FeMale className={styles.female}/>);
        }
        else if (user.Gender===APP_GENDER.MALE){
            gender=(<Male className={styles.male}/>);
        }
        return (
            <div className={styles.wrap_item}>
                <div className={styles.user_con}>
                    <div className={styles.user_info}>
                        <LazyImage wrapperClassName={styles.avatar} src={user.img} alt={"avatar"}></LazyImage>
                        <div className={`${styles.user_info} ${styles.info}`}>
                            <div className={styles.info_item}>
                                <div className={styles.name}>{user.NickName}</div>
                                {gender}
                            </div>
                            <CopyToClipboard text={user.UserID} onCopy={()=>{
                                toast.success(i18n.t("copy_success"));
                            }}>
                                <div className={styles.info_item}>
                                    <div className={styles.text}>{i18n.t("settings.user_info.id")}</div>
                                    <div className={styles.text}>{user.UserID}</div>
                                    <button>
                                        <SvgIcon className={styles.icon_copy} herf={"icon_Copy"}/>
                                    </button>
                                </div>
                            </CopyToClipboard>
                            <div className={styles.info_item}>
                                <img className={styles.icon_golds} src={USD}/>
                                <div className={styles.golds}>{global.DOLLAR+""+numFormatter(user.Score)}</div>
                            </div>
                        </div>
                    </div>
                    <div className={styles.user_edit_con}>
                        <button className={styles.edit_btn} onClick={()=>{
                            navigate(ROUTE_PATH.EDIT_PROFILE);
                        }}>
                            <SvgIcon className={styles.icon} herf={"icon_Edit"}/>
                        </button>
                    </div>
                </div>
                {/*<div className={styles.card_line}></div>*/}
                {/*{renderPhone()}*/}
                {/*{renderEmail()}*/}
            </div>
        )
    }
    const renderUserInfo=()=>{
        return (
            <>
                {
                    isLogin?renderUser():renderEmpty()
                }
            </>
        )
    }
    const renderItemSecurity=()=>{
        return (
            <>
                {
                    isLogin?(
                        <button className={styles.action_item} onClick={()=>{
                            navigate(ROUTE_PATH.EDIT_PWD);
                        }}>
                            <div className={styles.action_left}>
                                <SvgIcon className={styles.icon} herf={"icon_Locked"}></SvgIcon>
                                <div>{i18n.t("settings.security")}</div>
                            </div>
                            <div className={styles.action_right}>
                                <SvgIcon className={styles.icon} herf={"icon_Arrow"}></SvgIcon>
                            </div>
                        </button>
                    ):(<></>)
                }
            </>
        )
    }
    const renderItemLang=()=>{
        return (
            <button className={styles.action_item} onClick={()=>{
                setIsShowLang(true);
            }}>
                <div className={styles.action_left}>
                    <SvgIcon className={styles.icon} herf={"icon_Language"}></SvgIcon>
                    <div>{i18n.t("settings.language")}</div>
                </div>
                <div className={styles.action_right}>
                    <div>{i18n.getCurrLangName()}</div>
                    <SvgIcon className={styles.icon} herf={"icon_Arrow"}></SvgIcon>
                </div>
            </button>
        )
    }
    const handleTheme=(theme)=>{
        toggleTheme();
        // "DefaultLanguage": "en",
        //     "ThemeColor": "dark"
        if (!isLogin)return;
        dispatch(reqChangeInfo({
            ThemeColor:theme
        }));
    }
    const renderItemTheme=()=>{
        return (
            <button className={styles.action_item}>
                <div className={styles.action_left}>
                    <SvgIcon className={styles.icon} herf={"icon_Exchange"}></SvgIcon>
                    <div>{i18n.t("settings.theme")}</div>
                </div>
                <div className={styles.action_right}>
                    <div className={styles.theme_con}>
                        <ToggleButtonGroup sx={{
                            display:"flex",
                            position: "relative",
                            width:"100%",
                            height:"100%",
                            alignItems:"center",
                            justifyContent:"space-between"
                        }} exclusive value={theme} onChange={(event, value)=>{
                            handleTheme(value);
                        }}>
                            <div className={styles.theme_bg} style={{left: `${theme === APP_THEME.DARK ? '0%' : '50%'}`}}/>
                            <ToggleButton sx={{
                                display:"flex",
                                position: "relative",
                                width:"100%",
                                height:"100%",
                                alignItems:"center",
                                justifyContent:"center",
                                border:"none",
                                backgroundColor:'transparent !important;',
                                ".Mui-selected:hover":{
                                    backgroundColor: 'transparent !important;',
                                }
                            }} value={APP_THEME.DARK}>
                                <SvgIcon className={`${styles.theme_icon} ${theme===APP_THEME.DARK?styles.active:''}`} herf={"icon_Dark"}/>
                            </ToggleButton>
                            <ToggleButton sx={{
                                display:"flex",
                                position: "relative",
                                width:"100%",
                                height:"100%",
                                alignItems:"center",
                                justifyContent:"center",
                                border:"none",
                                backgroundColor:'transparent !important;',
                                ".Mui-selected:hover":{
                                    backgroundColor: 'transparent !important;',
                                }
                            }} value={"light"}>
                                <SvgIcon className={`${styles.theme_icon} ${theme===APP_THEME.LIGHT?styles.active:''}`} herf={"icon_Light"}/>
                            </ToggleButton>
                        </ToggleButtonGroup>
                    </div>
                </div>
            </button>
        )
    }
    const renderItemGender=()=>{
        return (
            <div className={styles.action_item}>
                <div className={styles.action_left}>
                    <GenderIcon className={styles.icon}></GenderIcon>
                    <div>{i18n.t("settings.gender")}</div>
                </div>
                <div className={styles.action_right}>
                    {
                        user.Gender===APP_GENDER.FEMALE?(<FeMale className={styles.gender}></FeMale>):(<Male className={styles.gender}></Male>)
                    }
                    <SvgIcon className={styles.icon} herf={"icon_Arrow"}></SvgIcon>
                </div>
            </div>
        )
    }
    const renderSetting=()=>{
        return (
            <div className={`${styles.wrap_item} ${styles.action_wrap}`}>
                {renderItemSecurity()}
                {renderItemLang()}
                {/*{renderItemGender()}*/}
                {renderItemTheme()}
            </div>
        )
    }
    const renderLogout=()=>{
        return (
            <>
                {
                    isLogin?(
                        <button className={`button-gray ${styles.logout}`} onClick={()=>{
                            if (logoutStatus===REQ_STATUS.LOADING)return;
                            dispatch(reqLogout());
                        }}>
                            {
                                logoutStatus===REQ_STATUS.LOADING?(<SmallLoading fill={"#fff"} />):(<>{i18n.t("links.log_out")}</>)
                            }
                        </button>
                    ):(<></>)
                }
            </>
        )
    }
    return (
        <div className={styles.container}>
            <Spring type="slideUp" className={styles.content}>
                {renderUserInfo()}
                {renderSetting()}
                {renderLogout()}
            </Spring>
        </div>
    )
}
export default UserSettings;