import React, {useEffect, useState} from "react";
import {APP_COUNTRY_CODE, APP_WELFARE} from "@constants/app";
import {useThemeProvider} from "@contexts/themeContext";
import styles from "./styles.module.scss";
import Fade from "@mui/material/Fade";
import Modal from "@mui/material/Modal";
import Grow from "@mui/material/Grow";
import {useDispatch, useSelector} from "react-redux";
import {getBonusPack, getCPFFirst, getPaymentOrderStatus} from "@features/paySlice";
import {REQ_STATUS} from "@api/config";
import SmallLoading from "@components/SmallLoading";
import {getUserInfo, isLogined} from "@features/mainSlice";
import {ROUTE_PATH} from "@constants/routes";
import {reqPaymentOrder} from "@features/api";
import {useNavigate} from "react-router-dom";
import RUPaytypeSelect from "@widgets/WDeposit/RU/RUPaytypeSelect";
import BRCPFSave from "@widgets/WDeposit/BR/BRCPFSave/BRCPFSave";
import {formatTime} from "@utils/helpers";
const i18n=global.i18n;
const WBonusPack = () => {
    const [isShow, setIsShow] = useState(false);
    const {setWelfTabState}=useThemeProvider();
    const bonusPack=useSelector(getBonusPack);
    const user=useSelector(getUserInfo);
    const orderStatus=useSelector(getPaymentOrderStatus);
    const isLogin=useSelector(isLogined);
    const dispatch = useDispatch();
    const navigate=useNavigate();
    const cpfFirst=useSelector(getCPFFirst);
    const areaItem=global.getLocalAreaItem();
    const show=()=>{
        setIsShow(true);
        setWelfTabState(APP_WELFARE.BONUS_PACK);
    }
    const hide=()=>{
        setIsShow(false);
        setWelfTabState(-1);
    }
    const onGetPaymentCallback=()=>{
        hide();
        navigate(ROUTE_PATH.PAY_ORDER);
    }
    const onGetPaymentOder=(data)=>{
        if (!isLogin){
            hide();
            navigate(ROUTE_PATH.SIGN_IN);
            return;
        }
        if (orderStatus===REQ_STATUS.LOADING)return;
        let reqOrder=()=>{
            data.user=user;
            data.callback=onGetPaymentCallback;
            // data.callbackError=callbackErr;
            // dispatch(reqPaymentOrder(data));
            dispatch(reqPaymentOrder(data)).then((odata)=>{
                if (odata.payload){
                    callbackErr(odata.payload);
                }
            });
        }
        let callbackErr=(payload)=>{
            if (payload&&payload.code===301){
                if (areaItem.code===APP_COUNTRY_CODE.EU){
                    if (global.wdepositInfo!=null){
                        global.wdepositInfo.show(()=>{
                            reqOrder();
                        });
                    }
                }
            }
        }
        if (areaItem.code===APP_COUNTRY_CODE.RU){
            if (global.ruPaytypeSelect!=null){
                global.ruPaytypeSelect.show((eventType)=>{
                    data.eventType=eventType;
                    reqOrder();
                });
            }
        }
        else if (areaItem.code===APP_COUNTRY_CODE.BR){
            if (cpfFirst){
                if (global.brCPFSave!=null){
                    global.brCPFSave.show(()=>{
                        data.cpf_first=1;
                        reqOrder();
                    })
                }
            }
            else
            {
                reqOrder();
            }
        }
        else{
            reqOrder();
        }
    }
    useEffect(()=>{
        const bonusPack={
            show,
            hide
        };
        global.bonusPack=bonusPack;
        return ()=>{
        }
    },[])
    const renderMain=()=>{
        let payItem=bonusPack;
        if (payItem==null)return (<></>);
        let give=0;
        let money=0;
        let total=0;
        let second_give=0;
        let precent="";
        if (payItem.gear){
            give=Number(payItem.gear.give);
            money=Number(payItem.gear.money);
            second_give=Number(payItem.gear.second_give);
            total=give+money;
            precent='+'+Math.floor((give)*100/money)+'%';
        }
        return (
            <div className={styles.f_main}>
                <img className={styles.bglight} src={require('@assets/bonusPack/bglight.png')}/>
                <div className={styles.pack_con}>
                    <div className={styles.percent_con}>
                        <div data-title={precent} className={styles.text}>{precent}</div>
                    </div>
                    <div className={styles.bonus_con}>
                        <div data-title={global.DOLLAR+total} className={styles.p_text}>{global.DOLLAR+total}</div>
                    </div>
                </div>
            </div>
        )
    }
    const renderPayBtn=()=>{
        let payItem = bonusPack;
        if (payItem == null) return (<></>);
        let money = 0;
        let payType = 0;
        let gift_id=0;
        if (payItem.gear){
            money = Number(payItem.gear.money);
            payType=payItem.gear.id;
            gift_id=payItem.gear.gift_id;
        }
        return (
            <button className={styles.f_btnpay} onClick={() => {
                onGetPaymentOder(
                    {
                        price:money,
                        goodsName:"firstpay",
                        payType:payType,
                        GiftsID:gift_id
                    }
                )
            }}>
                {
                    orderStatus===REQ_STATUS.LOADING?(<SmallLoading fill={"#fff"}/>):(
                        <>
                            <span data-title={i18n.t("bonusPack.only_need")}
                                  className={styles.label}>{i18n.t("bonusPack.only_need")}</span>
                            <span data-title={global.DOLLAR + money}
                                  className={styles.pay_num}>{global.DOLLAR + money}</span>
                        </>
                    )
                }
            </button>
        )
    }
    const renderLeftTime=()=>{
        let payItem = bonusPack;
        if (payItem == null) return (<></>);
        let countdown=payItem.timeleft;
        let d=Math.floor(countdown/86400);
        let time=countdown-d*86400;
        let stime=formatTime(time);
        let sd=i18n.language==="ru"?'д':'d';
        let dstr=d>0?d+sd:"";
        return (
            <div className={styles.f_leftcon}>
                <div className={styles.f_cd_title}>
                    <img className={styles.clock} src={require('assets/bonusPack/clock.png')}/>
                    <span>{i18n.t("bonusPack.event_cd")}</span>
                </div>
                <span className={styles.f_cd}>{dstr+" "+stime}</span>
            </div>
        )
    }
    const renderPaytypeSelect=()=>{
        if (areaItem.code===APP_COUNTRY_CODE.RU){
            return (<RUPaytypeSelect/>)
        }
        else
        {
            return (<></>);
        }
    }
    const renderCPFSave=()=>{
        if (areaItem.code===APP_COUNTRY_CODE.BR){
            return (<BRCPFSave/>)
        }
        else
        {
            return (<></>)
        }
    }
    return (
        <>
            <Modal open={isShow} onClose={hide} closeAfterTransition>
                <Fade in={isShow} timeout={500}>
                    <div className={styles.container}>
                        <Grow in={isShow} timeout={500}>
                            <div className={styles.f_con}>
                                <img className={styles.title} src={require(`@assets/bonusPack/${i18n.language}.png`)}/>
                                {renderLeftTime()}
                                {renderMain()}
                                {renderPayBtn()}
                            </div>
                        </Grow>
                    </div>
                </Fade>
            </Modal>
            {renderPaytypeSelect()}
            {renderCPFSave()}
        </>
    )
}
export default WBonusPack;
