import { useNavigate } from 'react-router-dom';
import React, { useState, useEffect } from 'react';
import { useDispatch, useSelector } from "react-redux";
import { getIsGuest, getLoginStatus, getSMSLoginStatus } from "@features/mainSlice";
import { reqGameInfo, reqLogin, reqSMSLogin } from "@features/api";
import styles from './styles.module.scss';
import LazyImage from '@components/LazyImage';
import Spring from "@components/Spring";
import PhoneSMS from '@widgets/PhoneSMS';
import { REQ_STATUS } from "@api/config";
import { APP_LOGIN_TYPE, APP_THEME } from "@constants/app";
import login_bg from '@assets/login/login_bg.webp';
import { localStorageGet, localStorageSet } from '@utils/helpers';
import { LOCAL_LAST_LOGIN_TYPE } from '@constants/localkey';
import SmallLoading from '@components/SmallLoading';

const i18n = global.i18n;
const objInfo = {
    cdTimer: null,
    inSubmit: false,
    loginTyp: 0,
}

var countryCode = "";

const LoginForm = ({ close }) => {
    const loginStatus = useSelector(getLoginStatus);
    const dispatch = useDispatch();
    const navigate = useNavigate();
    const smsLoginStatus = useSelector(getSMSLoginStatus);
    const [loginType, setLoginType] = useState(0);

    //effect_______
    useEffect(() => {
        let type = localStorageGet(LOCAL_LAST_LOGIN_TYPE, "0");
        setLoginType(parseInt(type));
        return () => {
            objInfo.inSubmit = false;
        }
    }, [])
    const onCountryChange = (country) => {
        countryCode = country;
    }
    const onSubmitOTPLogin = (data) => {
        if (smsLoginStatus === REQ_STATUS.LOADING) return;
        data.callback = onCallback;
        dispatch(reqSMSLogin(data));
        objInfo.loginTyp = 1;
    }
    const onCallback = (code) => {
        // global.authLockPath=null;
        objInfo.inSubmit = false;
        if (code == 200) {
            localStorageSet(LOCAL_LAST_LOGIN_TYPE, objInfo.loginTyp.toString());
            if (global.authLockPath != null) {
                let path = global.authLockPath;
                global.authLockPath = null;
                navigate(path, { replace: true });
            }
            else {
                if (close) close();
            }
        }
    }
    const onSubmitLogin = (data) => {
        if (loginStatus === REQ_STATUS.LOADING) return;
        //if (objInfo.inSubmit) return;
        localStorageSet(LOCAL_LAST_LOGIN_TYPE, "0")
        data.country = countryCode;
        data.callback = onCallback;
        dispatch(reqLogin(data));
        objInfo.inSubmit = true;
        objInfo.loginTyp = 0;
    }
    const renderLogo = () => {
        return (
            <div className={styles.l_logo}>
                <LazyImage className={styles.logo_img} src={login_bg} alt={""}></LazyImage>

                <div className={styles.logo_num}>$ 15</div>
            </div>
        )
    }
    const renderLoginbadge = (active) => {
        return (
            active ? <span className={styles.guest_badge}>{i18n.t("login.last_login")}</span> : <></>
        )
    };
    const reanderSmsLogin = () => {
        return (
            <Spring type="slideUp" className={styles.form_box}>
                <PhoneSMS
                    callback={onSubmitOTPLogin}
                    buttonText={i18n.t("login.sign_in_btn")}
                    handleStatus={smsLoginStatus}
                    onCountryChange={onCountryChange}>
                    {renderLoginbadge(loginType != 0)}

                </PhoneSMS>
                <div className={styles.guest_line}>
                    <span>{i18n.t("login.login_or")}</span>
                </div>
                <button type={"button"} className={styles.guest_btn} onClick={() => {
                    onSubmitLogin({ type: APP_LOGIN_TYPE.GUEST });
                }}>
                    {
                        loginStatus === REQ_STATUS.LOADING ?
                            <SmallLoading fill='#fff' /> :
                            <span className={styles.btn_label}>{i18n.t("login.guest_login")}</span>
                    }
                    {renderLoginbadge(loginType == 0)}

                </button>
            </Spring>
        )
    }

    return (
        <div className={styles.container}>
            {renderLogo()}
            {reanderSmsLogin()}
        </div>
    )
}

export default LoginForm;
