import {useEffect, useState} from "react";
import styles from "./styles.module.scss";
import Modal from "@mui/material/Modal";
import Fade from "@mui/material/Fade";
import Grow from "@mui/material/Grow";
import {useDispatch, useSelector} from "react-redux";
import {getOFirstPay, getPaymentOrderStatus} from "@features/paySlice";
import {ROUTE_PATH} from "@constants/routes";
import {REQ_STATUS} from "@api/config";
import {reqPaymentOrder} from "@features/api";
import {useNavigate} from "react-router-dom";
import {getUserInfo} from "@features/mainSlice";
import SmallLoading from "@components/SmallLoading";
import {useThemeProvider} from "@contexts/themeContext";
import {APP_WELFARE} from "@constants/app";
const i18n=global.i18n;

const WFirstPay=()=>{
    const [isShow, setIsShow] = useState(false);
    const firstPayConf=useSelector(getOFirstPay);
    const dispatch = useDispatch();
    const navigate=useNavigate();
    const user=useSelector(getUserInfo);
    const orderStatus=useSelector(getPaymentOrderStatus);
    const {setWelfTabState}=useThemeProvider();
    const show=()=>{
        setIsShow(true);
        setWelfTabState(APP_WELFARE.FIRST_PAY);
    }
    const hide=()=>{
        setIsShow(false);
        setWelfTabState(-1);
    }
    useEffect(()=>{
        const firstPay={
            show,
            hide
        };
        global.firstPay=firstPay;
        return ()=>{
        }
    },[])
    const onGetPaymentCallback=()=>{
        hide();
        navigate(ROUTE_PATH.PAY_ORDER);
    }
    const onGetPaymentOder=(data)=>{
        if (orderStatus===REQ_STATUS.LOADING)return;
        data.user=user;
        data.callback=onGetPaymentCallback;
        dispatch(reqPaymentOrder(data));
    }
    const renderMain=()=>{
        if (firstPayConf==null)return (<></>);
        let first_pay=firstPayConf.first_pay;
        let give=0;
        let money=0;
        let total=0;
        let precent="";
        if (first_pay!=null){
            give=Number(first_pay.give);
            money=Number(first_pay.money);
            total=give+money;
            precent='+'+Math.floor(give*100/money)+'%';
        }
        return (
            <div className={styles.f_main}>
                <img className={styles.bglight} src={require('@assets/firstPay/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={total} className={styles.bonus}>{total}</div>
                    </div>
                </div>
            </div>
        )
    }
    const renderPayBtn=()=>{
        if (firstPayConf==null)return (<></>);
        let first_pay=firstPayConf.first_pay;
        let money=0;
        let payType=0;
        if (first_pay!=null){
            money=Number(first_pay.money);
            let gear=first_pay.gear;
            if (gear!=null){
                gear=JSON.parse(gear);
                if (gear)gear=gear[0];
                payType=gear.id;
            }
        }
        return (
            <button className={styles.f_btnpay} onClick={()=>{
                onGetPaymentOder({
                    price:money,
                    goodsName:"firstpay",
                    payType:payType,
                    GiftsID:201
                })
            }}>
                {
                    orderStatus===REQ_STATUS.LOADING?(<SmallLoading fill={"#fff"}/>):(
                        <>
                            <span data-title={i18n.t("firstPay.only_need")}
                                  className={styles.label}>{i18n.t("firstPay.only_need")}</span>
                            <span data-title={global.DOLLAR + money}
                                  className={styles.pay_num}>{global.DOLLAR + money}</span>
                        </>
                    )
                }
            </button>
        )
    }
    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/firstPay/${i18n.language}.png`)}/>
                            {renderMain()}
                            {renderPayBtn()}
                        </div>
                    </Grow>
                </div>
            </Fade>
        </Modal>
    )
}
export default WFirstPay;