import { REQ_STATUS } from '@api/config';
import styles from './styles.module.scss';
import { getBonusStatus, getTurnplate } from "@features/turnplateSlice";
import WWithdrawalInfo from '@widgets/WWithdrawalInfo';
import { useDispatch, useSelector } from "react-redux";
import { reqTurnplateBonus } from '@features/api';
import WITHDRAW_TYPE from '@constants/withdraw_types';
import { getFreeChannel, getFreeWithdrawClaimStatus } from '@features/mainSlice';
import { useNavigate } from 'react-router';
import { ROUTE_PATH } from '@constants/routes';
import { getWithdrawOnlyType } from '@utils/helpers';



const WReferral = () => {
    const turnplate = useSelector(getTurnplate);
    const bonusStatus = useSelector(getBonusStatus);
    const freeWithdrawStatus = useSelector(getFreeWithdrawClaimStatus);
    const freeChannel = useSelector(getFreeChannel);
    const dispatch = useDispatch();
    const navigate = useNavigate();

    if (!global.referralPayload) return <></>;

    const { type, score, callback } = global.referralPayload;
    const cashBase = Number(global.CASH_BASE) > 0 ? Number(global.CASH_BASE) : 1;
    const collectedAmount = (Number(turnplate?.collect_amount) || 0) / cashBase;
    const missionScore = Number(score) || 0;
    const onConfirm = async () => {
        if (type === WITHDRAW_TYPE.SHARE) {
            if (bonusStatus === REQ_STATUS.LOADING) return;
            await dispatch(reqTurnplateBonus()).unwrap().catch(e => null);
            navigate(ROUTE_PATH.HOME, { replace: true });
        } else if (type === WITHDRAW_TYPE.MISSION) {
            if (freeWithdrawStatus === REQ_STATUS.LOADING) return;
            callback?.();
        }
    };


    if (type === WITHDRAW_TYPE.SHARE) {
        return (
            <div className={styles.container}>
                <span>{global.DOLLAR}{collectedAmount.toFixed(2)}</span>
                <WWithdrawalInfo
                    paypalTips
                    togType={2}
                    amount={collectedAmount}
                    onlyType={getWithdrawOnlyType(freeChannel)}
                    onConfirm={onConfirm}
                    loading={bonusStatus === REQ_STATUS.LOADING} />
            </div>
        );
    } else if (type === WITHDRAW_TYPE.MISSION) {
        return (
            <div className={styles.container}>
                <span>{global.DOLLAR}{missionScore.toFixed(2)}</span>
                <WWithdrawalInfo
                    paypalTips
                    togType={2}
                    amount={missionScore}
                    onlyType={getWithdrawOnlyType(freeChannel)}
                    onConfirm={onConfirm}
                    loading={freeWithdrawStatus === REQ_STATUS.LOADING} />
            </div>
        );
    } else {
        return <></>;
    }
};


export default WReferral;