import React, { useContext, useState, useMemo } from 'react';
import { SettingsContext } from '../../App/SettingsContext';
import Header from '../Header';
import RewardManagement from '../../view/RewardManagement';
import ReferrerDetails from '../../view/ReferrerDetails';
import { translate } from '../../../Helper';
import Loader from '../../../components/core/Loader';

function RewardManagementTab() {
    const { ecreActiveScreen, loading } = useContext(SettingsContext);

    // Return loading until everything is ready
    if (loading) {
        return (
            <div className="reward-settings">
                <Header title={translate('reward_management')} subtitle={translate('reward_management_subtitle')} />
                <Loader />
            </div>
        );
    }


    return (
        <div className="reward-management">
            <Header title={translate('reward_management')} subtitle={translate('reward_management_subtitle')} />
            {loading ? <Loader /> : 
                <>
                    {ecreActiveScreen === 'reward_management' ? <RewardManagement/>: null}
                    {ecreActiveScreen === 'referrer_details' ? <ReferrerDetails/> : null}
                </>
            }
        </div>
    );
}

export default RewardManagementTab;